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I first saw the web in my final year of university in 1993-94. All the cool 


kids (bear in mind, this was a Computer Science department) were play- 


ing with a strange bit of software called Mosaic on their Sun 4 work- 
stations. I had some fun with it and created my first web page (a guide to 
Edinburgh pubs), but it didn't strike me as anything more than a curios- 
ity and it certainly didn't measure up to "proper" document preparation 
formats like LaTeX. It's not the first time I've been completely wrong 
about technology — and it won't be the last! 


I went back to experimenting with websites in 1997, a full-on blinking, 
scrolling plethora of tacky animated gifs which is thankfully long lost. As 
I learned more about the web I stopped seeing it as a poor-quality type- 
setting system and started seeing it as a great equalizer. Not only was 
visiting a web page something anyone could do, making a web page was also 
something anyone could do. Since then I've been on a mission, not only to 
learn as much as I can about making web pages, but to help others learn 
how to make them, and this book is a natural extension of that mission. 


НТМІ5 and CSS3 are fascinating to me not only because of their techni- 
cal features, but because they represent growth in the web platform after 
several years of stagnation. The more the web can do, the more content 
can be shared across the world by ordinary people like you and me. 


XV 
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about this book 


You should read this book if you’re interested in learning about the new 
features in HTML5 and CSS3 available to web developers and enjoy an 
example-driven, visual approach to learning. Readers in any of the fol- 


lowing categories should find this book useful: 


© Experienced web developers 

^ Novice web developers 

© App developers (iPhone, Android, Windows 8 Metro) 
^ [nteractive media designers 


^ Web designers 


Different readers will find different parts of the book interesting. Please 
see the later section "Book structure and suggested reading order" for 
further guidelines on how to navigate the book. 


Extra content for beginners 


This book focuses on the new features of HTML5 and CSS3; as such it 
expects the reader to have a little experience with their predecessors. But 
we will take things slowly, especially in the early chapters, and each feature 
discussed will come with example code you can try yourself. If you know 
what fags are and what a CSS rule looks like, then you should have few 
problems. If you're new to web development, then you'll benefit from the 
short introduction to HTML and CSS in appendixes B and C. 


To use many of the new features in HTMLSA, it is helpful to have some 
knowledge of JavaScript. If you are a complete beginner, then you will 
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still find this book useful as it mostly uses small examples which are 
easy to experiment with. Appendix D is provided to get you started in 
JavaScript. 


Book structure and suggested reading order 


This book is split into two sections: part 1 concentrates on HTML5 and 
part 2 on CSS3. The HTMLS section has chapters on the new markup 
features of HTMLS, forms and form validation, HTML5’s new dynamic 
graphics capabilities, using video and audio, new JavaScript APIs for 
client-side development, and new APIs related to networking. Asa 
rough guideline, the early chapters require little-to-no knowledge of 
JavaScript, with each successive chapter building your knowledge 
base. The second section starts with a couple of chapters on the nuts 
and bolts of CSS3 and selectors, followed by chapters on layout, motion 
and color, borders and backgrounds, and fonts and text formatting. 


Most of the chapters are self-contained, — >» RECOMMENDED ORDER 


a * OPTIONAL STEP 


although there are a few dependencies. 
The following chapter diagrams show a 
few suggested reading orders, based on your role and what you expect 
to get out of the book. Each diagram consists of chapter numbers in 
boxes as well as the recommended and optional steps, which are indi- 
cated by two types of arrows as shown in the key above. 


If you are a... 


Read chapters in this order 


WEB DEVELOPER 


If you're a web developer looking to get up to speed, 
then you should have no problem reading the chap- 
ters in numerical order. The CSS used in chapters 2 
through 6 should be easy for you to follow. If you're 
interested in the history of HTML and the standards 
process, then you can read appendix A before you 
dive in. It's likely that appendixes B through D are 
not going to tell you anything you don't already know, 
So there's no need to bother with them. 


C ME 

| 
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If you are a... 


Read chapters in this order 


NOVICE WEB DEVELOPER 


If you’re a novice web developer, then a slightly dif- 
ferent approach is recommended. Again, read 
appendix A only if you're interested in history, but do 
read appendixes B, C, and D if you have little-to-no 
experience with HTML, CSS, and JavaScript. Read 
appendix C and chapter 7 right after chapter 1 to 
build your familiarity with CSS so that the limited 
amount of CSS used in chapters 2 through 6 
doesn't hold you back. 


APP DEVELOFER 


If your goal is to be an app developer, either target- 
ing mobile devices or Windows 8 Metro style apps, 
then the key chapters for you are 1 through 6 which 
concentrate on the markup and programming 
platform provided by HTML5. Include appendixes B 
and D plus chapter 7 if you're coming to HTML5 from 
another platform. Chapter 8 discusses CSS layout, 
which will be useful for apps. This diagram assumes 
a graphic designer will handle the detailed design 
Work, so chapters 9 through 11 are not shown. 


INTERACTIVE MEDIA DESIGNER 


If you're an interactive media designer who is a 
heavy user of Flash for media, animation, or 
interactive content, then you can safely skip chapters 
2, 5, and 6. Chapter 3 deals with dynamic graphics 
and 4 with audio and video, and chapters 9 and 10 
deal with the more visual-impact aspects of CSS3. 
Chapter 8 on layout will be of less interest to you, 
but chapter 11 covers using custom fonts, so you 
may want to read that section. 


WEB DESIGNER 


If you're a pure web designer with no interest in 
JavaScript, then you can read the book while 
avoiding most of the code. Any snippets of 
JavaScript you'll come across in chapters 1 and 7 
through 11 can be ignored unless you want to try 
replicating CSS3 effects in JavaScript for 
backwards compatibility. 


Du c 
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Characters and conventions 


This book uses many graphic elements and typographical conventions 
to guide you and help you learn about HTML5 and CSS3. This section 
summarizes what you can expect to see. 


CHARACTERS 


You'll be helped along by the characters from the popular User Friendly 
cartoons. In case you're not familiar with this web comic, let me intro- 
duce each of the characters and explain their roles in this book. 


puter games, nifty art, and has a big-brother relationship with 
the Dust Puppy. He'll be your main guide through HTML5 and 
\ CSS3, pointing out gotchas and giving you extra tips. 
| Р ё ё ё БУ р 


© A.J. is the Columbia Internet Web Developer. He loves com- 
C2 


The Dust Puppy was born inside of a network server, a result 
of the combination of dust, lint, and quantum events. He is 
wide-eyed and innocent, with no real grasp of reality, but he's 
pretty cute and people love him. In this book, Dust Puppy's 
main role will be to help you move from one topic to the next, 


summarizing what you've just learned and letting you know 
what's coming next. 


Erwin is a highly advanced Artificial Intelligence (AI) that 

resides somewhere on the network. He was created overnight 

by the Dust Puppy, who was feeling kind of bored. Erwin will 

help out whenever something needs looking up on the internet 
EO — or when you need to think like a computer. 


Miranda is a trained Systems Technologist and an experienced 
UNIX sysadmin. A.J. is her boyfriend and she'll be helping him 
out throughout the book. 
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Greg is in charge of Technical Support at the company. He has 
broad technical knowledge but no expertise in web develop- 
ment. A.J. is helping him learn about web development, and 
he'll ask questions when A.J. isn’t being clear. 


Stef works as the Corporate Sales Manager. He can’t under- 
stand the way techies think, so he doesn’t get very far with 
them. Although he admires the power of Microsoft’s marketing 
muscle, he has a problem with Microsoft salesmen, probably 
because they make much more money than he does. 


Mike works as a System Administrator, and is responsible for 
the smooth running of the network at the office. He will help us 
out whenever we need to understand some details of server-side 
setup. 


Sid is a self-described “lichen of the tech-forest floor,” a long- 
lived, deeply experienced and acerbic observer of the geek 
gestalt. His history in computing involved vacuum tubes and, 
later, punch cards. He carries with him an air of compassion 
mixed with disdain for the younger geeks around him. 


Pitr works with Mike as a System Administrator. For some rea- 
son he always wears dark glasses and has adopted a guttural 
Eastern European accent. Pitr will take some time out from his 
plans for world domination to keep A.J. in his place and to 
demonstrate that attention to minor technical details that makes 
geeks so well loved. 


Crud Puppy is Dust Puppy’s evil twin and nemesis, born from 
the crud in Stef’s keyboard. Whenever we need an antagonist, 


Crud Puppy will be happy to oblige. 
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CARTOONS & DIAGRAMS 


There are many cartoons and diagrams in this book. The cartoons are 
based on the actual User Friendly comic strips. Their intent is humorous 
rather than educational as they poke fun at various aspects of web 
development. A sample cartoon is shown below. 


USER FRIENDLY by Illiad 


HEY/ WHY ARE YOU ALL JUST 
STANDING ABOUT? WHAT 
SORT OF EXAMPLE DO YOU 
THINK YOU'RE SETTING?! 


COPYRIGNTE)2003 JLLIAD — MTTP:/ /WWW.USCRFRIENDLY.ORG/ 


Diagrams are part of the text; they present information that's easier to 
understand in pictorial form. An example diagram follows. 


DIAGRAMS WILL OFTEN BE DISCUSSED 
P BY CHARACTERS. LIKE THIS 


prendere KEY FEATURES WILL BE 
É Dx HIGHLIGHTED LIKE THIS. 


Pro-Order options” 


Сман ксл» ала ntt төсе hy LIT өте CED in 
түзө MERA 


CODE LISTINGS & SNIPPETS 


Code listings and snippets and any occurrence of code in the text will 
appear in the LucidaMonoEF font. Here is a typical code snippet: 


<body> 
<p>HTML5 and CSS3</p> 
</body> 
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Longer listings will look like this: 


LISTINGS WILL ALSO BE DISCUSSED BY 


S ge CHARACTERS. HERE IS A SIMPLE WEB PAGE. 
CZ 


<!DOCTYPE html» 
«html» 
| \ <head> 
<title>Hello!</titLle> 
</head> 
<body> 
<p>HTMLS and CSS3</p> -«--.... 
</body> E 
</html> MORE DETAILED LISTINGS HAVE 


ANNOTATIONS JUST LIKE DIAGRAMS. THIS 
ONE POINTS OUT THE EARLIER SNIPPET. 


Code downloads 


Up-to-date downloadable code samples and other news about the book 
are available from the publisher’s website at www.manning.com/ 


HelloHTML5andCSS5. 


Author Online 
Purchase of Hello! HTML & CSS5 includes free access to a private web 


forum run by Manning Publications where you can make comments 
about the book, ask technical questions, and receive help from the 
author and from other users. To access the forum and subscribe to it, 
go to www.manning.com/HelloHTML5andCSS3. This page provides 
information on how to get on the forum once you're registered, what 
kind of help is available, and the rules of conduct on the forum. 


Manning's commitment to our readers is to provide a venue where a 
meaningful dialogue between individual readers and between readers 
and the author can take place. It's not a commitment to any specific 
amount of participation on the part of the author, whose contribution to 
the book's forum remains voluntary (and unpaid). We suggest you try 
asking the author some challenging questions, lest his interest stray! 


The Author Online forum and the archives of previous discussions will 
be accessible from the publisher's website as long as the book is in print. 
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About the author 


Rob Crowther is a web developer and blogger based in London, UK. 
Currently he works for a small software company building web appli- 
cations for corporate clients such as BNP Paribas, BNY Mellon, Hon- 
eywell, and Young & Co.'s Brewery. 
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Learning HTML5 


his part of the book focuses on НТМІ5. Chapter 1 introduces you to 
new and updated markup features in HTML, chapter 2 discusses 
forms and form validation, chapter 3 explores HTML5's new dynamic 
graphics capabilities, chapter 4 talks about how to use video and audio 
on your web pages, and chapters 5 and 6 look at the new APIs you can 
use for client-side development and networking. 
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Introducing HTMLS markup 


This chapter covers 


s New semantic elements in HTML 
* Updated HTML4 elements 

* New global attributes 

* The HTML5 content model 


* Getting new elements to work in old browsers 


USER FRIENDLY by J.D. "Illiad" Frazer 


LOOKS LIKE HTMLA IS FINALLY 
GOING TO BE REPLACED. АҢ '97 EVERYONE FILLING THEIR WE'VE COME A LONG WAY 
GEOCITIES PAGE WITH ANIMATED 


GIFS THEY FOUND ON ALTAVISTA. 


/ 


HTMLA WAS ORIGINALLY 


COPYRIGHT ©2008 2.0. Tiad” Frazer MTTP-/ /WWW.OSURFRELNDLY.ORG/ 


This chapter assumes you have some knowledge of previous versions of 
HTML. If you're new to HTML, check out appendix B—it should give 
you enough information to understand this chapter. 
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4 CHAPTER 1 Introducing HTML5 markup 


We'll start with some background on how and why the particular set of 
new elements in HTML was chosen. Then we'll examine new elements 
for the overall structure of web pages before moving on to elements, 
both new and redefined, intended for particular bits of content. You'll 
then learn about the new attributes in HTML5. Next, we'll spend a few 
pages considering the more conceptual issue of the new approach to 
element categorization in HTMLS. Finally, you'll go back to practicali- 
ties and learn how to make sure your new HTMLS content will work in 
old browsers. 


Why do we need new elements? 


This section looks at some of the research that went into understanding 
the document structures that web authors were trying to describe 
semantically with HTML; this information was used to decide which 
new elements should be added in HTML5. We'll then look at each of 
the new elements in turn. 


What does semantic mean? 

At heart, HTML is a way of describing hyperlinked documents: documents that 
are linked together as part of a network of knowledge. The elements of HTML 
are meant to mean something, and that meaning is what we refer to as the se- 
mantics. Because HTML describes documents, the semantics are along the lines 
of “this content is a paragraph,” “this content is a level-one heading,” and “this 
content is an unordered list." 


Being able to describe the structure of a document this way is valuable because 
it lets you keep the details of how to best display content separate from the con- 
tent itself. The result is that the same web page, if well structured, can easily be 
read on a desktop computer, a mobile phone, and a text-to-speech converter. 
Compare this to a document format like PDF, where the layout and content are 
deeply interlinked because the fidelity of the eventual printed output is the pri- 
mary goal. It's usually awkward to read an A4 PDF on a mobile device because 
there's no option other than to view it at A4 size. 


HTML4 has two built-in methods for extending the semantics of ele- 
ments: the id and class attributes. The id attribute is a unique identi- 
fier, but, rather than a random string, the identifier can be a meaningful 
word —іп other words, it can have semantic value. The class isn't 
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unique, but multiple classes can be applied to a single element like tag- 
ging in popular social network tools. Some examples are shown in the 
following table. 


Markup Suggested meaning 
<p> A paragraph 
<p id="author"> A paragraph that represents a particular author 
<p class="bio"> A paragraph that represents a biography 
<p class="author bio"> A paragraph that represents an author biography 


No definitive standard sets down which values mean what,! so one site 
could use writer for the same thing another site uses author for, or two 
sites could use author to mean something completely different. This 
isn't a huge issue, because HTML isn’t intended to describe real-world 
things like authors, so the meaning behind those values is likely to be 
site-specific anyway. But id and class attributes can also be used to 
describe document features; for instance, a nav class would probably 
indicate an element that contains navigation. If you were looking for 
ideas for new elements to add to HTML to improve its ability to 
describe documents, a survey of the sorts of values used in id and class 
attributes would be a good place to start. 


With this in mind, in 2005 several studies were done that attempted to 
analyze how authors were using id and class values in markup on the 
web. Two of these are of particular interest to us: 


: In November 2005, a study of 1,315 websites counted how often dif- 
ferent values for the id attribute were used. 


^ In December 2005, a study of slightly over a billion web pages ana- 
lyzed, among other things, how often particular class names 
appeared. 


! Although some have attempted it. See the discussion of microformats later in this chapter. 
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The diagram that follows shows the top 20 results in each category 
down each side and the corresponding new НТМІ5 elements along 
with the IDs and classes that inspired them in the middle. 


CLSIDD27CD. j HEADER "7. i. FOOTER 
FOOTER i HEADER Baer E 2” MENU is. MENU 
BTAMARKER * TITLE Р : : TITLE 
ТОР“ — *. MENU У 
CONTENT Р .. ТЕХТ 
AREATITLE : SECTION k CONTENT 
LAYOUT LEONI CONTAINER ЖЕГУ " HEADER 
NOBULLET CONTENT “ы TEXT BODY MATS; TIME ~. NAV 
SQBULLET CONTENT eee MAIN CONTENT. б pare „~= COPYRIGHT 
LOGO ки pesi эзше"? BUTTON 
SEARCH = ASIDE “e коа. „нн... MAIN 
wm £ + 7 МАУ CS INPUT, 
i SIDEBAR 3 Оу - SEARCH 
BANNER Ж LEFT 2 E NAV NAV Е : T YPE=SEARCH E MSONORMAL 
CONTAINER ыл" Mee Т? v SEARCH d DATE 
TOP aside: SUUEMADQU Ie SMALLTEXT 
SIDEBAR wo FOOTER "S е МОЩ BORY 
NAV г ^ І SMALL E STYLE! 
Т LOGO FOOTER: * E 

WRAPPER t "E jS SMALLTEXT À TOP 
i ER E н NT WHITE 

MANY OF THE TOP IDS, LIKE btamarker AND nobulletcontent, ARE 

AUTOMATICALLY GENERATED BY SOFTWARE SUCH AS MICROSOFT 

FRONTPAGE AND OTHER OFFICE PRODUCTS. THEIR POPULARITY 15 

THEREFORE. MORE AN INDICATION OF THE MARKET PENETRATION OF 

THE PRODUCTS THAN AUTHOR REQUIREMENTS OR INTENTIONS. 

\ 


USER FRIENDLY by J.D. "Шад" Frazer 


PROFESSIONAL DEVELOPMENT? 
AREN'T MOST WEBSITES DONE BY 


I DONT GET IT. THE BOSS'S TEENAGE NEPHEW? 


/ ІТ ALL COMES DOWN TO 
SEPARATION OF CONCERNS. 


COPYRIGHT ©2008 3.0. "Mad" Frazer NTTP:/ /WWW.USERFRIUNDLY.ORG/ 
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In the next section, you'll learn about some of the new elements that 
have been added to HTMLS as a result of this research. 


New elemente for page structure 
By page structure we mean the top-level items: the header, the footer, the 
navigation, the main content, and so on. Let's join A.J. and Greg, who 
are discussing the research results from the previous section. 


OK, WE NEED NEW ELEMENTS, 
AND THE RESEARCH POINTS AT WHAT 
THEY SHOULD ВЕ IN GENERAL. HOW DOES 
THIS FIT INTO REAL WEBSITES? 
Ps \ WHY DON'T WE PICK 
SOME WEBSITES AND TAKE А — 
LOOK TOGETHER? 
I VISIT THE BBC AND | 
WIKIPEDIA EVERY DAY. 
AND I'LL ADD 
\ THE WORDPRESS BLOG 
TO GIVE US A GOOD 
CROSS SECTION. 
THAT SEEMS LIKE THREE 
стн QUITE DIFFERENT SITES! \ 
Ба — әх < AND YET 
2- YOU'LL SEE 
; © Сп THAT THEY HAVE 
пез zi MANY COMMON 
] ELEMENTS. 
à E а - Just Another WordPress 
WS... 2 
gem == . 
mum v* 


Da 


Е 


Sectioning content 
Its common for web pages to have many distinct sections. A blog 
homepage usually has several blog posts, each a section in itself, and 
each blog post may have a comments section or a related-posts section. 
HTML4 offers only one type of element for this common need: <div>. 
HTML5 adds two new elements: «section» and <article>. 
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CAN'T YOU ALREADY CREATE. 
SECTIONS IN HTMLAP 
HTMLA HAS THE 
<div> ELEMENT. ' 
p un WHAT DOES 
«div» MEAN? 
IT DOESN'T MEAN ANYTHING. 
IT'S EXPRESSLY DEFINED AS 
SEMANTICALLY NEUTRAL. BUT 
HTMLS ADDS THE <section> 


AND «article» ELEMENTS. HOW DO THEY FIT 
\ INTO A WEB PAGE? 


LOOK AT THE PAGE SEGMENT BELOW, ISEE. 
IT SHOWS NEWS AND SPORTS HEADLINES IN HTMLS, THE 
WITH THREE STORIES UNDER EACH. IN MARKUP BETTER 


HTMLA EACH ONE WOULD BE A «div». DESCRIBES THE 
CONTENT. 


N omms 


The «section» and «article» elements are conceptually similar. Articles 
and sections can be interchangeable —articles can exist happily within 
sections, but articles can also be broken down into sections, and there's 
been a lot of discussion about whether HTML5 really needs both of 
them. For now, though, we have both, and you're probably asking 
yourself how to decide which one to use. The key parts of the spec to 
focus on when choosing one or the other are as follows: 


^ An article is intended to be independently distributable or reusable. 


^ А section is a thematic grouping of content. 
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ON OUR SAMPLE WEBSITES. WHAT 
WOULD BE MARKED ИР AS A SECTION? 


LOOK AT THE BBC HOME PAGE. EACH 
COMPONENT IS FROM A DIFFERENT PART — N/A 
OF THE SITE: NEWS, SPORTS, AND SO ON. 


(^N i 
| ‚ OK SO EACH OF THOSE IS А 5ЕСТТОМ. 
IS THERE AN EXAMPLE THAT SHOWS THE 
DIFFERENCE BETWEEN A SECTION 
AND AN ARTICLE? 


| © News 


LOOK AT THE COMMENTS SECTION ON A 
TYPICAL WORDPRESS BLOG: IT'S A SECTION, 
WITH EACH COMMENT AN ARTICLE. 


9 
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sss = = 


Headings, headers, and the outlining algorithm 
Heading elements provide an implicit structure for documents. A ead- 
ing indicates the start of a new section and briefly describes the topic of 
the text that follows. The level of a heading (levels 1 through 6 in 
HTML) indicates an implicit hierarchy. This implicit structure is useful 
for the automatic generation of a table of contents. Some websites, 
such as Wikipedia, generate a table of contents for each page; screen 
readers and other accessibility tools use the table of contents to allow 
users to navigate the page more easily. НТМІ5 formalizes this implicit 
structure with the outlining algorithm. In this section, you'll learn 
about this algorithm as well as how it interacts with the two new head- 


ing elements, «header» and <hgroup>. 


A <header> element appears near the top of a document, a section, or an 
article and usually contains the main heading and often some naviga- 
tion and search tools. Here’s an example from the BBC website. 
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Here's how that might be marked up in HTMLS: 


«header» 
<h1>BBC</h1> 
<nav> 

<ul> 


<li><a href="/options">Display Орііопѕ</а></11> 
<li><a href="/access">Accessibility Не1р</а></11> 
<li><a href="/mobile">Mobiles</a></1Li> 


</ul> 
</nav> 
<form target="/search"> 


«input name="q" type="search"> 


<input type="submit"> 
</form> 
</header> 


YOU'LL LEARN MORE ABOUT 
THE <nav> ELEMENT LATER 
IN THIS CHAPTER. HTMLS'S 
NEW FORM ELEMENTS WILL 
BE COVERED IN DEPTH IN 
CHAPTER 2. 


<hgroup> 
<h1>HTML5 
Cincluding next generation 
additions still in 
deve Lopment) 
«/hi» 
«h2»Draft Standard &mdash; 
12 May 2010</h2> 
</hgroup> 


The <hgroup> element should be used 
where you want a main heading 
with one or more subheadings. For 
an example, let's look at the HTML5 


spec: 


HTMLS5 (including next generation 
additions still in development) 
Draft Standard — 12 May 2010 


© 
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The «header» element can contain any content, but the <hgroup> element 
can only contain other headers—that is, <һ1> to <h6>, plus <hgroup> 
itself. The following diagram demonstrates the differences. 


<HEADER> <HEADER> XHGROUP» <HGROUP> 
<HDHEADING</H?> <HPHEADING</Hf> <HDHEADING</Hf> <HDHEADING</Hf> 
v дый a <P>»PARAGRAPH</P> <H2>SUB-HEAD</H2> 
</HGROUP> m </HGROLIP> 
ONE OUTLINE LEVEL > ONE OUTLINE LEVEL 
TWO OUTLINE LEVELS 


The outlining algorithm generates a table of contents for your docu- 
ment based on the section and heading markup you've used. In 
HTMLA, the overall structure of a document was left up to individual 
browsers to decide; in HTMLS, it's part of the spec. This benefits you 
because any user agents that need an outline, often for accessibility 
purposes,” will generate the same outline for any given document. To 
help you get the idea, let’s look at several sample documents. Erwin 
will generate the document outline according to the HTMLS5 spec. 
You'll see how the outline is impacted both by headings and heading 


groups as well as the articles and sections we discussed in the previous 


DOWNLOADING HTMLS SPEC ... LOCATING 
— \ — OUTLINING ALGORITHM... PARSING ... 
OK SHOW ME THE MARKUP! 


2 The W3C’'s User Agent Accessibility Guidelines recommend that browsers generate a document out- 
line in guideline 1.10.2: www.w3.org/TR/UAAG20/#g]l-alternative-views. 


section. 
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«body» 
<h1>Main heading</h1> 
<p>Some text</p> 


1 MAIN HEADING 

* LLEVEL 2 HEADING 

>+ LLEVEL З HEADING 

* 2 ANOTHER LEVEL 2 HEADING 


<h2>Level 2 heading</h2> 

<p>Some more text</p> 

<h3>Level 3 heading</h3> 

<p>A bit more text</p> 

<h2>Another level 2 heading</h2> 

<p>The last bit of text</p> 
</body> 


In a plain document with no other sectioning con- 
tent, the outline will match the heading levels. 
This is similar to the way a table of contents in 
Wikipedia is generated (right). Headings can also 
be grouped using the <hgroup> element. Let’s see 
how they affect the document outline: 


<hgroup> 
<h1>Main heading</h1> 
<h2> 
Subheading to main heading 
</h2> 
</hgroup> 
<p>Some text</p> 
<h2>Level 2 heading</h2> 
<p>Some more text</p> 
<h3>Level 3 heading</h3> 
<p>A bit more text</p> 
<hgroup> 
<h2>Another level 2 heading</h2> 
<h3> 
Subheading to level 2 heading 
</h3> 
</hgroup> 
<p>The last bit of text</p> 
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1 MAIN HEADING 
* 1 LEVEL 2 HEADING 


Шо 2) 


Contents [hse] 
1 History 
1.1 Origins 
1.2 First specifications 
1.3 Version history of the standard 
1.3.1 HTML version timeline 
1.3.2 HTML draft version timeline 
1.3.3 XHTML versions 
2 Markup 
2.1 Elements 
2.1.1 Attributes 
2.2 Character and entity references 
2.3 Data types 
2.4 Document type declaration 
3 Semantic HTML 
1 Delivery 
4.1 HTTP 
4.2 HTML e-mail 
4.3 Naming conventions 
4.4 HTML Application 
5 Current variations 
5.1 SGML-based versus XML-based HTML 
5.2 Transitional versus strict 
5.3 Frameset versus transitional 
5.4 Summary of specification versions 
6 Hypertext features not in HTML 
7 WYSIWYG Editors 
8 See also 
9 References 
10 External links 
10.1 HTML tutorials 


фф 1 LEVEL З HEADING 
* 2 ANOTHER LEVEL 2 HEADING 


WAIT! THAT'S THE SAME 


э аы 
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The outline will only show the highest level heading from any <hgroup>: 
you can see the headings “Subheading to main heading” and “Subhead- 
ing to level 2 heading” don’t appear in the outline. The <hgroup> ele- 
ment can contain any number of subheadings, but it can only contain 
other heading elements. 


Next, let’s look at how sections affect the outline: 


<h1>Sections</h1> 

<section> pisce - 
<h1>Main heading</h1> >> {LEVEL Z HEADING 
<p>Some text</p> >>» 1LEVEL SHEADING 
<h2>Level 2 heading</h2> Фф 2 ANOTHER LEVEL 2 HEADING 

* 2 MAIN HEADING 

<p>Some more text</p> oe TLEVEL2 the 
<h3>Level 3 heading</h3> >>» 1 LEVEL З HEADING 
<p>A bit more text</p> +> 2 ANOTHER LEVEL 2 HEADING 


<h2>Another level 2 heading</h2> 


& NOW YOU'RE GETTING 
<p>The last bit of text</p> 57 WORTHWHILE CHALLEN 
«/section» 
«section» А—- 


«hi»Main heading</h1> 

<p>Some text</p> 

<h2>Level 2 heading</h2> 

<p>Some more text</p> 

<h3>Level 3 heading</h3> 

<p>A bit more text</p> 

<h2>Another level 2 heading</h2> 

<p>The last bit of text</p> 
</section> 


As you Can see, there are now multiple <һ1> elements in the document, 
but they don t all sit at the same level of the document outline. In fact, 
you can do without any heading element other than <hi>. Let's look at 
another example. 
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«hi»Main heading</h1> 
<p>Some text</p> 
<section> 
«hi»Level 2 heading</hi> 
<p>Some more text</p> 
«article» 
«hi»Level 3 heading«/h1» 
<p>A bit more text</p> 
«/article» 
</section> 
<section> 
<h1>Another level 2 heading</h1> 
<p>The last bit of text</p> 
</section> 


1 MAIN HEADING 
* 1 LEVEL 2 HEADING 


> {LEVEL З HEADING 
* 2 ANOTHER LEVEL 2 HEADING 


& у THIS AGAIN! THINGS ARE. 
LS. STARTING TO GET ABIT 
REPETITIVE. 
то: у 


We have achieved the exact same outline as the original example but 


using only level-one headings. Earlier, we discussed the similarity 


between «section» and «articles. If we replace one with the other in the 


previous listing, you can see how similar they are: 


«hi»Articles«c/hl» 

«article» 
<h1>Main heading</h1> 
<p>Some text</p> 
<h2>Level 2 heading</h2> 
<p>Some more text</p> 
<h3>Level 3 heading</h3> 
<p>A bit more text</p> 
<h2>Another level 2 heading</h2> 
<p>The Last bit of text</p> 

«/article» 

«article» 
<h1>Main heading</h1> 
<p>Some text</p> 
<h2>Level 2 heading</h2> 
<p>Some more text</p> 
<h3>Level 3 heading</h3> 
<p>A bit more text</p> 
<h2>Another level 2 heading</h2> 
<p>The last bit of text</p> 

«/article» 
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1 ARTICLES 
ф 1 MAIN HEADING 
>» LLEVEL 2 HEADING 
> {LEVEL З HEADING 


Фф 2 ANOTHER LEVEL 2 HEADING 
* 2 MAIN HEADING 

Фф LLEVEL 2 HEADING 

>>> {LEVEL З HEADING 

Фф 2 ANOTHER LEVEL 2 HEADING 


OUTLINING. 


THIS IS IDENTICAL TO THE 
6 ) Ж <section> EXAMPLE. 
<section> AND <article> ARE 
INTERCHANGEABLE FOR 
По: 2) 
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Now let’s consider the <header> element. It represents the header of a 
document, a section, or an article, typically containing headings and 
other metadata about the section. You'll frequently have content that 
you don’t want to be part of the heading element itself but that doesn’t 
fit in with the following content. Examples would be subheadings, 
author bylines, and publishing date information: 


<hi>Articles</h1> 
«article» 1 ARTICLES 
«header» » 1 MAIN HEADING 
<һ1>Ма1п heading</h1> >» LLEVEL 2 HEADING 
>>> LLEVEL З HEADING 
<p>Some text</p> >» 2 ANOTHER LEVEL 2 HEADING 
</header> % 2 MAIN HEADING 
<h2>Level 2 heading</h2> >» 1 LEVEL 2 HEADING 


> 1 LEVEL З HEADING 
Фф 2 ANOTHER LEVEL 2 HEADING 


<p>Some more text</p> 
<h3>Level 3 heading</h3> 


<p>A bit more text</p> THE <header> ELEMENT DOES 
г NOT НАМЕ ANY IMPACT ОМ 
<h2>Another level 2 heading</h2> D THE DOCUMENT OUTLINE. 


<p>The last bit of text</p> IT'S AS IF IT'S NOT THERE. 
</article> 
<article> 
<header> 
«hi»Main heading</h1> 
<p>Some text</p> 
</header> 
<h2>Level 2 heading</h2> 
<p>Some more text</p> 
<h3>Level 3 heading</h3> 
<p>A bit more text</p> 
<h2>Another level 2 heading</h2> 
<p>The last bit of text</p> 
</article> 


Common page elements 
There are more new elements than <article>, <section>, <header>, and 
<hgroup>. Let’s look at some more pages from our set of typical web- 
sites. 
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WEB PAGES ARE MORE THAN JUST ARTICLES, SECTIONS, AND 
HEADINGS. WHAT ABOUT OTHER ELEMENTS? 9 
' 


WE HAVE «nav» FOR NAVIGATION AND «aside» FOR 
_-— NONESSENTIAL CONTENT LIKE SIDEBARS. | 
| 
& <aside>? THAT SOUNDS LIKE A STAGE 
DIRECTION FOR A POST MODERN SITCOM. fs 
\ WHY NOT JUST CALL IT SIDEBAR? 


BECAUSE THE ELEMENT IS MORE GENERAL PURPOSE. 
ADS. NAVIGATION GROUPS, OR PULLQUOTES COULD 
ALSO BE ASIDES. 


\ HMM, IF YOU SAY SO. WHAT ABOUT FOOTERS? THERE 


MUST BE A «footer» ELEMENT TO GO WITH «header». 


THERE I$ ALONG WITH A «small» ELEMENT FOR FINE 
PRINT-LEGAL INFORMATION AND DISCLAIMERS 


| HANG ON. THERE'S A «nav» ELEMENT IN THAT FOOTER! 


YES. THERE'S NO RULE E: OQ—————" 
THAT SAYS YOU CAN HAVE. IC Ica epe de €— 
ONLY ONE РЕК Pace. FOOTER” ү. == p 
ANYWHERE YOU HAVE me 
NAVIGATION. YOU CAN 

USE THE «nav» ELEMENT. zm = — 
LINKS IN THE FOOTER SMALL MM 
АКЕ МЕКУ commn. WEE EM 


The <aside> element is intended for content that 
isn’t part of the flow of the text in which it [ e] 
appears but is still related in some way. In many 

books, including this one, you'll see sidebars for 

things such as terminology definitions and 

historical background, like the one that follows — [ e) 


these would be marked up as <aside> if the 


book was HTMLS. Sidebars are also common 
in website design, although the meaning is 
slightly different: often they contain navigation 
or related links. 


Sidebar 
This is an example sidebar. If this were an HTML5 document, it would be marked 
up with the «aside» element. 
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The <nav> element is intended for navigation, 


both within the page itself, as in the Wikipedia 


[E] 
table of contents, and through the rest of the 
website. You can have any number of <nav> mI 
elements on a page. On large sites, it’s common 


to have global navigation across the top 


(in the <header>) and local navigation in a sidebar 


(in an «aside» element). 


The «footer» element generally appears at the end 
of a document, a section, or an article. As with 


the «header» element, its content is generally 
metainformation — author details, legal informa- 
tion, or links to related information. But it's valid 


to include «section» elements within a footer — for 


example, when marking up appendixes. 


The <5та11> element often appears within a 


«footer» or «aside» element —it contains copy- 


right information, legal disclaimers, and other 
fine print. Note that it's not intended to make text 
smaller. You may choose to style its contents 


smaller than your main text, but, as with other 


elements, its role 1s to describe its contents, not 
prescribe presentation. 


The HTML DOCTYFE 


The pocrvPE declaration optionally appears at the start of an HTML 
document. It comes from the Standard Generalized Markup Language 
(SGML) that was used to define previous versions of HTML in terms of 
the language syntax. The DOCTYPE serves two practical functions: 


^ It’s used by HTML validation services to determine which version 
the document uses. 


^ Browsers use the DOCTYPE to determine which rendering mode to use. 
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The rendering modes are Standards, Almost Standards, and Quirks 
mode. These modes represent various stages in the history of browser 
development and allow modern browsers to display old web pages the 
way they were intended. See appendix C for a discussion of these fac- 
tors —the short version is, Standards mode is what you want. 


HTML? is defined in terms of its DOM representation after parsing, so 
it doesn't need a DOCTYPE for validation, but we still want legacy brows- 
ers to render pages in standards-compliant mode. With this in mind, 
the authors of the HTMLS5 spec worked out the minimal amount of 
markup required to trigger Standards mode in browsers: 


<!DOCTYPE html» 
Compare this with similar declarations for HTML4 and XHTMLI: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3.org/TR/xhtml11/DTD/xhtmli-strict.dtd"» 


You can see that the HTML5 DOCTYPE is much shorter, easier to type, 
and easier to remember. 


New elements for content 


Time 


There are several other new or redefined elements in HTMLS, and in 
this section you'll learn about some of them. HTML5 includes dedi- 
cated elements for dates as well as figures and captions, all common 
elements of modern web pages. It also rehabilitates the <b> and <i> ele- 
ments that were deprecated in HTMLA. This section looks at each of 
these in turn. 


The <time> element allows an unambiguous ISO 8601 date to be 
attached to a human-readable version of that date. This is useful if you 
want some other website or service to look at your web pages and 
extract information. A common use case for this is that you're advertis- 
ing an event on your website and you'd like it to appear in search 
results for queries such as "events in London next week." Alternatively, 
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you might decide to write a program to build a timeline of the English 
monarchy by crawling Wikipedia; being able to parse all the dates in a 
straightforward way would make this much easier. Following are three 


examples of these sorts of pages: 


Beautiful Design for 
Everyone with Ann 
McMeekin & 
= Antonia flyde- . 
X May 24th, 2010 at 6:30 PM P - * TIME 
= “= ====° - = 


The Melton Mowbray 
=== 
отте Топ Mowbray "18 ~ 


“tiolbom ~ECIN2LELondon- у= = = PLACE 


~ = United Kingdom = * 


Tweet This Event 


o0G YE OV -—- 
wor 4] Today, 19:45; BBC Radio 4%, 
- 


. ' 
ГА LI 
А ` 
TIME PLACE 
House House of Plantagenet 
Father Henry lil 
Mother Eleanor of Provence 
Born 17/18 June 1239 
Palace of Westminster, 
London, England ae TIME 


mom m m ag? 
Died чу 1307 (age 95) 
e Burgh by Sands," * q 


^ Supberiand, Englane es PLACE 


Burial Westminster Abbey, 


London, England 


This WordPress blog is advertising an 
upcoming event. You can see the key 
components are all present here: 


© An event title 
^ A time 
© Aplace 


The BBC website has a page for each 
program, and this contains information 
about when the program will next be 
broadcast. Although the title isn’t shown 
here, you can see the key components: a 
time and a place (although in this case 
the “place” is more abstract). 


Finally, Wikipedia has events on many 
pages —in this example, the “event” is 
the death of Edward I. You may not con- 
sider this the same sort of thing as the 
previous two examples, but it shares the 
same basic characteristics. This pattern 
is so common that the microformats 
movement established a standard way of 
marking it up called hCalendar. 


In the previous examples, it should have been fairly easy for you to 


pick out the key bits of information even without the big dotted circles, 


but computers need a more structured form of data. One approach to 


this is microformats. 
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Microformats 


Microformats are an effort to extend the expressive power of standard HTML by 
using certain attributes, mostly the class attribute, in a standardized way. Pop- 
ular microformats include hCard, for describing contact information, adr for ad- 
dresses, and hCalendar for describing events. Similar technologies include the 
more formal RDFa and HTML5's own microdata (see section 2.5.3). 


The main goal of microformats is to render common information like 
events easily parseable by computers without affecting the end-user 
presentation. 


MICROFORMATS ENABLE A NUMBER OF LISEFLIL APPLICATIONS: SEARCH 
ENGINES THAT CAN TELL YOU ABOUT NEARBY UPCOMING EVENTS AND 
BROWSERS THAT CAN ALITOMAT ICALLY ADD THE EVENTS TO YOLIR CALENDAR. 


OZ 


Addresses, being naturally plain text information with some internal 
structure (house number, street name, city, and so on) are relatively 
easy to deal with, as long as there’s some way to demarcate the compo- 
nents. Microformats manage this by adding a class of location to the 
containing element, or alternatively using another microformat, adr, to 
describe the address in detail. Dates and times are more complicated. 
Take the simple example 1/6/2011. If you're reading this in the United 
States, you probably interpret that as January 6, whereas in the UK 
the date is 1st June. Or have another look at the earlier BBC example: 
the date is "today." I took that screenshot some time ago — how useful 
is "today" now? You may think this is no more or less ambiguous than 
the addresses, but the frustrating thing is that we know that an abso- 
lute date and time underlie the more ambiguous human expression that 


we see more commonly. 


COMPUTERS LIKE DATES AND TIMES IN AN UNAMBIGUOUS FORMAT. 
PEOPLE OFTEN FIND THE UNAMBIGUOUS FORMAT HARD TO DIGEST BUT 
CAN EASILY UNDERSTAND AMBIGLIOUS DATES FROM THE CONTEXT. TO 
SERVE BOTH, WEB PAGES NEED TO PROVIDE DATES IN TWO FORMATS. 


CZ 
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НТМІ5 solves this problem by providing a <time> element. Let's look 
at an example: 


«time datetime="2011-06-01">today</time> 


We can be more specific: 
«time datetime="2011—06—-01T18:00:00+01:00">6 o'clock on 1/6/2011</time> 


Humans get a readable time that they can disambiguate through the 
context in the normal way, and computers can read the ISO 6801 date 
and see the date, time, and time zone. 


Time and data 


Originally the «time» element had a pubdate attribute to allow for its use in 
marking up blog posts and other articles. Early in 2012, the entire <time> ele- 
ment was removed from the WHATWG version of the spec because it didn't ap- 
pear to be getting used for that purpose. There was something of an uproar 
within the community, and the <time> element was reinstated shortly after, 
along with a new element, «data», for more general-purpose association of 
human-readable text with data for computers. At the time of writing, this 
new element has not yet made it into the W3C version of the spec, so it isn't 
covered here. 


Images and diagrams with «figure» and «figcaption» 

Putting an image in à web page 1s easy enough: the <img> element has 
existed since the early days of the web. It was somewhat controversial 
at the time, and several alternatives were put forward; but the most 
popular browser (Mosaic) implemented it, so it became a de facto stan- 
dard. The ability to add images was one of the main things that cata- 
pulted the web from being an academic document-sharing network 
into a worldwide phenomenon in the mid 1990s, but since that early 
take-up not much has changed. 


The <img> tag is limited from a semantic standpoint — there's no visible 
way to associate explanatory text with the image. It's possible to use the 
alt and longdesc attributes, but because neither is visible by default, both 
have been somewhat ignored or misused in the real world. The <figure> 
element offers an alternative —it groups the figure with its caption. 
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This is what the markup for the following screenshot looks like: 


«figure» 
«img src-"scenery.jpg" alt="Picture of the Irish south coast"> 
<figcaption>Looking out into the Atlantic Ocean 
from south west Ireland«/figcaption» 

</figure> 


Note that <figure> doesn’t have to contain 
an <img> element. It might instead contain 
an SVG drawing or a <canvas> element, or 
even ASCII art in a <pre> element. What- 
ever type of graphic it contains, the <figure> 


element links the graphic to the caption. 


Emphasizing words and phrases 


2 


The <b> and <i> elements have a long history in HTML. They were 
listed, along with the <em> and <strong> elements, in the character-high- 
lighting section of the 1993 IETF draft proposal for HTML. The <b> and 
<i> elements are listed in the subsection “Physical Styles” (along with 
<tt>) —that is, their purpose was entirely presentational. Meanwhile, 
<em> and <strong> (along with several others) are in the subsection 
"Logical Styles" — elements with semantic meaning. This early distinc- 
tion highlights the problem <b> and <i> would later run into. 


You saw at the start of this chapter that separation of concerns is the 
Holy Grail of web authoring — HTML for content, CSS for presenta- 
tion, and JavaScript for behavior. Because <b> and <i> are entirely pre- 
sentational, their use has long been frowned on, and there have been 
several serious proposals to remove them from HTML. Meanwhile, 
«strong» and «em» have always had a semantic definition while appear- 
ing identical to <b> and <i>, respectively, in most browsers. 


EVER PRAGMATIC, THE HTMLS SPEC RECOGNIZES THAT, WITH MILLIONS OF PAGES OF 
LEGACY CONTENT OUT THERE, BROWSERS AREN'T GOING TO BE DROPPING SLIPPORT 
FOR <b> AND «i» ANY TIME SOON. ON THE OTHER HAND, BLINDLY USING <em> INSTEAD 
OF «i» AND <strong> INSTEAD OF <b>, OR USING A <span> ELEMENT TO APPLY A 
BOLD OR ITALIC STYLE TO A WORD ISN'T GOOD PRACTICE SEMANTICALLY. 
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So, instead of removing either <b> or <i>, НТМІ5 redefines and reha- 
bilitates them. 


Element | HTML4 definition HTML5 definition (taken from the spec on May 12, 2010) 


<i> Renders as italic "The i element represents a span of text in an alternate voice 
text style or mood, or otherwise offset from the normal prose, such as a 
taxonomic designation, a technical term, an idiomatic phrase 
from another language, a thought, a ship name, or some other 
prose whose typical typographic presentation is italicized." 


«b» Renders as bold "The b element represents a span of text to be stylistically offset 
text style from the normal prose without conveying any extra importance, 
such as key words in a document abstract, product names in a 
review, or other spans of text whose typical typographic presen- 
tation is boldened." 


As you can see, the HTML4 definition is entirely presentational, 
whereas the HTMLS definition goes to great lengths to give a semantic 
meaning while remaining compatible with the purely presentational 
uses of the two elements for backward compatibility. 


USER FRIENDLY by Illiad 


І HEARD ABOUT THAT HTMLS ONLY IN THE HEADS OF IT'S TRUE THAT THE HTMLS SPEC 
MARKETING GIMMICK FOR д WEB DEVELOPERS -- DID ANYONE IS FOR WEB ALITHORS AS WELL AS 
HAVE TO CHANGE A SINGLE BROWSER MANUFACTURERS. 
LINE OF CODE? 


HA! I KNEW ТТ. 


HTML5's new global attributes 


An attribute is global if it can be applied to all elements. The two most 
obvious global attributes in НТМІА are id and class, which, as you saw 
in the section "Why do we need new elements?" can be used to add 
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extra semantic information to elements. In this section, you'll learn 
about new НТМІ5 global attributes from three major categories: 


^ Accessibility for Rich Internet Applications (ARIA), for providing 
extra data to accessibility tools 
^ Data-* attributes, for providing extra data for scripts on your page 


> Microdata attributes, for providing extra data to browsers and 
scripts on other sites 


Accessibility with ARIA 


ARIA is a standard developed at the W3C in response to the generally 
poor accessibility of early AJAX-based web applications. 


THE BENEFITS OF ARIA 


WEB PAGE SENT 
FROM SERVER PEES TI PAGE XR en SOUND 
aj —— — Ej JJ 
AJAX UPDATE Ny PAGE IS READ 
FROM SERVER 3 FROM TOP TO 
D UPDATED CONTENT `^ BOTTOM 
HAS ALREADY BEEN ` 
READ TO USER: NOW nd 
WE NEED ARIA 
| 
EU ARIA ALLOWS DEVELOPERS TO MAKE 
A| | — ^SSISTIVE TECHNOLOGIES AWARE OF 
| ЄЎ CONTENT UPDATES IN THE BROWSER. 
= AND THEIR IMPORTANCE. 
Z ч 
je IF YOU'RE IN THE MIDDLE OF READING. — AS 
БДИ) YOU DON'T NEED TO BE IMMEDIATELY 
GIVEN A MINOR UPDATE. : 


Notifying users of AJAX updates isn't the only benefit ARIA can pro- 
vide. ARIA consists of a set of attributes and values that can describe to 
assistive technology the roles of various page elements and their status. 
In other words, they add semantic value to HTML elements so you can 
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say “this element is a header,” “this element is navigation,” “this ele- 
ment is a toolbar,” and so on. Let’s look at an example: 


<body role="document"> 
«div role-"note" aria-live-"polite" 
aria-relevant-" additions removals"> 
An update added by JavaScript 
«/div» 
«div role="banner"> 
«hl role-"heading" aria-level-"1"»The heading</h1> 
«/div» 
«div role="navigation"> 
«a role-"link" href="/home">Home Page</a> 
«a role-"link" href="/inbox">Inbox</a> 
«/div» 
«div role="main"> 
A very interesting article goes here. 
«/div» 
«div role="footer"> 
All rights reserved. 
«/div» 
«/body» 


This should all sound a little familiar to you. What HTMLS aims to 
accomplish through additions such as the «header» and «nav» elements is 
similar to what ARIA tries to accomplish in providing better semantics 
to assistive technology. But it's still worth bothering with ARIA 
because it has a wider and more far-reaching vocabulary than HTML5 
for describing the components of web applications. Plus it already has 
wide support among vendors of browsers, operating systems, and 
assistive technology. 


The НТМІ5 spec has a long list of elements to which user agents 
should automatically assign particular ARIA roles. These elements are 
said to have strong native semantics, so if you use HTMLó correctly you'll 
get a certain amount of accessibility for free compared to what НТМІ4 
offered once the browsers and assistive technologies implement sup- 
port. The НТМІ5 spec also explicitly lists the allowed ARIA roles for 
those elements where there's a risk the ARIA role will be in conflict 
with the HTML5 semantics —these are implied native semantics. Valida- 
tion tools can then flag inappropriate combinations. 
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Using HTMLS, you can cut down on the amount of markup required to 
provide an accessible user experience. This listing updates the previous 
one but takes advantage of the strong and implied native semantics in 
place of several of the ARIA attributes: 


«body» 
«aside aria-live-"polite" aria-relevant-"additions removals"> 
An update added by JavaScript 
«/aside» 
«header role="banner"> 
«hi»The heading</h1> 
«/header» 
«nav» 
«a href="/home">Home Page</a> 
«a href="/inbox">Inbox</a> 
</nav> 
<article role="main"> 
A very interesting article goes here. 
</article> 
<footer> 
All rights reserved. 
«/footer» 
</body> 


ALTHOUGH YOU DON'T HAVE TO USE THE IMPLIED ARIA ROLES ON 
ELEMENTS WITH STRONG SEMANTICS, SUCH AS «link» AND «nav». AT 
PRESENT NO ASSISTIVE TECHNOLOGIES RECOGNIZE THE HTMLS 
ELEMENTS. YOU SHOULD SPECIFY BOTH FOR BACKWARD COMPATIBILITY. 


\ 


Extending HTML with custom attributes 


Custom data attributes allow authors to add arbitrary data to elements 
for their own private use. The idea is that some data isn’t directly rele- 
vant to the user but does have meaning to the J avaScript on the page 
that can't be expressed in HTML semantics. It's a standardization of an 
approach taken by several JavaScript widget libraries, such as Dijit 
(the Dojo toolkit). These libraries, like HTML45, set out to enhance and 
extend the application abilities of HTML4—adding things such as 
combo boxes and date pickers, which HTMLS5 also provides, but also 
more complex UI elements such as tree views, drop-down menus, and 


www.it-ebooks.info 


HTML5's new global attributes 27 


tabbed containers. Using one of these libraries, you declare an element 
to be a tab control like this: 


<div dojoType="dijit. Layout. TabContainer"> 
«div dojoType="dijit.layout.ContentPane" title="My first tab"> 
Lorem ipsum and all around... 
</div> 
«div dojoType-"dijit.layout.ContentPane" title="My second tab"> 
Lorem ipsum and all around - second... 
«/div» 
«div dojoType-"dijit.layout.ContentPane" title-"My last tab"> 
Lorem ipsum and all around - last... 
«/div» 
«/div» 


A browser, as with HTML elements, will parse the attribute, even 
though it doesn't recognize it, and add it to the DOM. The Ол library 
will run when the page has loaded, search for these attributes, and run 
the appropriate JavaScript to enable the advanced control. 


It may seem as though everyone has been getting along fine with creat- 
ing their own attributes, so why add support for custom attributes to 
HTMLS5? Well, for one thing, creating your own will stop your markup 
from validating. 


Failing validation may not bother you too much, but if you're looking 
for that one unintended mistake, having to sift through many intended 
ones should be unnecessary. Plus there's a risk that the attribute names 
chosen by the widget libraries will be used in future versions of HTML— 
after all, one of the goals of the spec is to codify existing common uses. 


The HTMLS solution to both the validation and potential name-clash 
issues is the data-* attribute collection. The * is a wildcard — that is, it 
can be whatever you want it to be. But anything starting with data- will 
be allowed through the validator, and you're guaranteed that no data-* 
attributes will be made part of HTML. 


THE data-* ATTRIBUTES ALLOW YOU TO ADD INFORMATION TO YOUR PAGE 
FOR YOUR OWN PERSONAL USE. IF YOUR GOAL IS TO SHARE INFORMATION NS 
WITH OTHER WEBSITES, YOU SHOULD INSTEAD USE MICRODATA. 
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Expressing more than just document semantics with microdata 


Microdata extends the expressive power of HTML to cover things that 
aren't strictly markup. You can use microdata to designate a portion of 
your page as describing contact information, a calendar event, or 
licensing information. 


USER FRIENDLY by J.D. "Шаа" Frazer 


HAVE YOU SEEN HTML S MICRODATA? 
YOUR CONTACT DETAILS CAN BE 
IMPORTED FROM A WEB PAGE 

WITH A SINGLE CLICK. 


HEY, THAT'S PRETTY COOL. TS WA TEC 
SEMANTIC EXTENSIBILITY DON 
BUILT INTO HTML. I CAN SEE OUT ON YOUR PERSONAL SITE? 
LOTS OF USES. REMEMBER TO TELL GREG, 
MIRANDA, AND AJ 


\ 


ч / NO. I'LL TAKE A LOOK. 


COPYRIGHT ©) 2009 J.D. “Miad” Frazee MTTP-/ /WWW.ÜSERTRIENDLY.ORG/ 


Microdata uses three global attributes: item, itemtype, and itemprop. All 
three can be seen in action in this short example that describes contact 
information: 


<section id="rob" itemscope 
itemtype="http://microformats.org/profile/hcard"> 
<һ1 itemprop="fn">Rob Crowther</h1> 
<p itemprop="n" itemscope>Full name: 
«span itemprop="given-name">Robert</span> 
«span itemprop="additional-name">John</span> 
«span itemprop="family—name">Crowther</span> 
</p> 
<p itemprop="org" itemscope> 
«span itemprop-"organization-name"»Manning Publications Co.</span> 
(<span itemprop="organization-unit">Hello! Series</span>) 
</p> 
</section> 


This code, because of the itemtype attribute on the parent element ref- 
erencing the hCard vocabulary, describes a person—me! The itemprop 
attributes are extracted as a set of name-value pairs into a tree-like data 
structure following the markup, like this: 
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HCARD 


udi n c" 
LU c P" s 


ROB GIVEN- FAMILY- ORGANIZATION- ORGANIZATION- 
CROWTHER NAME NAME NAME UNIT 
ROBERT CROWTHER MANNING HELLO! 
PUBLICATIONS CO. SERIES 


This information could then be recovered from the page in a usable for- 
mat by a web browser or a search engine. Of course, you may not want 
the information to be more easily usable by computers; normal rules of 
internet publishing apply. 


USER FRIENDLY by Illiad 


BUT WHAT CAN HE GAIN FROM 
GETTING A LOAD OF TECHIES TO 
PUBLISH THEIR CONTACT INFO IN 
EASILY PARSEABLE FORM. 


THIS MICRODATA STUFF IS FUN. IT'S 
REFRESHING FOR STEF TO TAKE 
AN INTEREST IN TECH WITHOUT 


LET'S SEE: 
STEP t TRICK TECH SAVVY PEOPLE 
INTO PUBLISHING CONTACT INFO. 
2. HARVEST EMAIL ADDRESSES. 
3 SELL TO HIGHEST BIDDER. 


httpillwww.userfriendly.orgl 


Copyright (c) 2000 Шад 


YOU'LL LEARN MORE ABOUT MICRODATA IN CHAPTER 5 WHEN 
WE LOOK AT THE MICRODATA АРТ, A CONVENIENT METHOD 
FOR EXTRACTING THE DATA FROM A DOCUMENT. THE NEXT 
SECTION LOOKS AT HOW YOU CAN PRODUCE A VALID HTMLS N” 
DOCUMENT BY LEARNING ABOUT THE CONTENT MODEL. 


The HTML5 content model 


The content model is somewhat theoretical, but it’s important because 
it’s the main way of determining whether it’s valid to use a certain ele- 
ment at a particular place in your document. In HTMLS, elements are 
split into categories. One element can be a member of several catego- 
ries; it can also be a member of a category only in particular circum- 
stances, such as when an attribute is given a certain value. In this 
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section, you'll learn where you can find this information in the spec, 
what elements fit into which content categories, and what the content 
categories are. The categories of which an element is a member are 
stated prominently in the HTMLS5 spec. The following diagram shows 
the content categories of the <hgroup> element. 


THE <hgroup> ELEMENT IS IN THE 
FLOW CONTENT AND HEADING 
CONTENT CATEGORIES. „ 

* 


4.4.7 The wma ejement $ 
5 - , 
+ Categories е 42° 
Flow content. 1 
~ a , Heading content, * 
"mmm mnt Shdidate. 
Contexts in which this element can be used: 
Where flow content is expected. 
Content model: 
One or more ħi, h2, h3, ^4, ^5, and/or hé elements. 
Content attributes: 
Global attributes 


* 


W3C Working Draft 


The spec is good if you have a question about a particular element, but 
it's cumbersome if you want a quick overview. Rather than trawl through 
the entire spec, the content categories can be summarized in a table. 


t Е Е 
= + 5122 [о 
Ф Ф t Е S t 
чә - = Ф 
c - c o o - o 
o c o o e 5 9 
Element o g o o © o о 
S Е o 2 E £ 
О © m | s 2 = 
И er uem eme 
кар Еу [||| 
o о = = Е o Ф 
= L a = W I [7] 
«a», «button», «input», «keygen», «label», e e e 
«select», «textarea» 
«abbr», «area», «b», «bdo», «br», «cite», e e 
«code», «datalist», «del», «dfn», «em», «i», 
«ins», «kbd», «map», «mark», «meter», «out- 
put», «progress», «q», «ruby», <samp>, 
«small», «span», «strong», «sub», «sup», 
«time», «var», «wbr» 
«address», «blockquote», «div», «dl», e 
<fieldset>, «figure», «footer», «form», 
«header», «hr», «ol», «p», «pre», «table», 
«ul», «Text» 
«article», «aside», «nav», «section» ° ° 
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= 
t t 9 2 E 2 
Ф Ф t £z 
= eu [= с Ф c 
c - c o o - o 
o © [s] o o 5 о 
Element o 2 o Ф © o fe] 
S = o > X E 
o fs x 5 o c 
ce le Sg s. g 
EE EE eta |g 
o 9 c z Е o Ф 
= L a = W I Ф 
<audio>, <embed>, <iframe>, <img*>, e e e 
<object>, <video> 
<base>, <title> e 
«canvas», «math», «svg» е е e 
«command», «link», «meta», <noscript>, e е e 
«script» 
«details», «menu» e e 
«hi1», <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup> ° ° 
<style> ° ° 


Now you know which content models apply to which elements, but 
that’s only part of the story. You also need to know what content cate- 
gories are allowed as children of any given element. The following dia- 
gram shows a couple of other excerpts from the НТМІ5 spec to 
illustrate where you can find this information. 


4.5.3 The pre element 


Ë 1 Categories 
THE «section» ELEMENT ALLOWS [ай E MEN 
FLOW CONTENT CHILDREN. = Contexts in which this element can be used: 
А е o PELLI is expected 
* 5 4 "Content model: > 
' m4 У. рмазпасомеп„# 
+ > ‚ Contantatiubetés: 
ae Global attributes 
1 52.42 The section element H 
ү] 17 Categories М 
ome Flow content * 
ES E E *. THE <pre> ELEMENT ALLOWS ONLY 
б V. Contexts in which this element can be used: PHRASING CONTENT CHILDREN. 
s 4 = Where Bow aentent is expected 
9 Content model: ~ 
z Мм Elow content 4 
Суттен аы гнет 
| Global attributes 


DOM interface: 
Uses im zlenemt. 
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The different content types aren't applied arbitrarily; each has a dis- 
tinct meaning. The following table summarizes the different types. 


Most elements are categorized as flow content. It's the default content 


Flow content type for elements visible on the page. 


Sectioning content defines the scope of headers and footers and feeds 


©ЗШЕ) сопс into the document outline. 


Heading content Heading content, as you might expect, is just for headings and <hgroup>. 


Phrasing content is mostly used to describe the text of a document. In 


potas ine omen most cases, phrasing content can only contain other phrasing content. 


Embedded content is used to put an external resource into the web 


Embedded content : : 
page—for example, an image or video. 


Interactive content is elements that are specifically intended for user inter- 
action—mostly form controls. Note that other elements can be made 
responsive to user input through the use of JavaScript, but elements cate- 
gorized as interactive content have default functionality in the browser. 


Interactive content 


Metadata content sets up the presentation or behavior of the rest of the 
Metadata content | content, or sets up the relationship of the document with other documents, 
or conveys other out-of-band information. 


Now that you know all about the content model, you'll be able to use 
the HTMLS spec to write valid HTML5 documents. That's more than 
enough theory for now. The next section gets back to practicalities and 
considers whether your users' browsers will support HTML5 and what 
to do about it if they don't. 


Browser support 


Do the new elements we've discussed in this chapter work in today's 
browsers? The short answer is, yes (with a couple of exceptions); the 


x FOR A TEXT ELEMENT LIKE <p>, WHICH ISN'T REQUIRED TO DO MUCH EXCEPT APPEAR ON 
@ THE PAGE, THERE ARE TWO PRINCIPAL REQUIREMENTS: 


хе 2" — © IT SHOWS LIP IN THE DOM WITH AT LEAST A STANDARD SET OF ELEMENT PROPERTIES. 
^N о IT SHOWS UP IN THE USER'S BROWSER WITH SOME SORT OF DEFAULT PRESENTATION. 
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long answer is a little more complex. Consider this question: what does 
it mean to say that a browser supports the <p> element? 


It turns out that the first requirement is easy to satisfy —as long as you 
follow simple tag-naming rules, you can put any tags in your HTML, and 
all browsers will put the tags in the DOM with a default set of properties. 


Where problems arise is with regard to the second requirement: having 
a default presentation. Browsers have only recently started providing 
any default presentation for the new elements in HTMLS; for instance, 
Firefox 3.6 doesn't, but Firefox 4.0 does. But this isn't much of a prob- 
lem. As you know, we web authors define our content in HTML and 
our presentation in CSS—and browsers work exactly the same way. 
The default presentation for the supported elements is defined in CSS. 
If you use Firefox, you can even find this file on your hard drive — it's 
called html.css. 


OF PROVIDING SOME DEFAULT CSS RULES FOR THEM. IN MOST CASES YOU'LL 
WANT TO WRITE CSS FOR THESE ELEMENTS ANYWAY, SO THIS DOESN'T SEEM 


USING THESE NEW ELEMENTS IS A MATTER OF TAKING ON THE RESPONSIBILITY 
LIKE TOO MUCH EFFORT. LET'S SEE HOW IT WORKS WITH AN EXAMPLE. e. 


rs 
Here's a simple HTML5 document to experiment with: 


«header» 
<hgroup> 
<h1>Hello! HTML 5</h1> 
<h2>An example page by Rob Crowther</h2> 
</hgroup> 
</header> 
<nav> 
«ul» 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 
</ul> 
</nav> 
<section> 
«article»The first article.«/article» 
«article»The second article.«/article» 
«/section» 
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Starting with the following basic 
styles, this screenshot shows what the 
page looks like in a browser that 
doesn't have any default HTML5 
styles: 

header, nav, section, article 
{padding: 4px; margin: 4px;} 
header 

{ background: #000; color: #999; } 
nav 

{ border: 4px solid #000; } 
section 

{ border: 4px dashed #000; } 
article 

{ border: 2px dotted #000; } 


By making a single change to that 
CSS, you can make the page work in 
most older browsers. See if you can 
spot it: 

header, nav, section, article 

{ padding: 4px; margin: 4px; 

display: block; } 

header 

{ background: #000; color: #999; } 
nav 

{ border: 4px solid #000; } 
section 

{ border: 4px dashed #000; } 
article 

{ border: 2px dotted #000; } 


If you specify that the block-level 
HTMLS elements <header>, «nav», 
«section», and «article» should be 
display: block, everything works as 
you want. 
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Most of the major browsers work identically in this regard. Unfortu- 
nately, there are two exceptions, one minor and one major. The minor 
one is Firefox 2.0; Firefox users tend to upgrade regularly, so this ver- 
sion is now used by a very small number of people and we won't worry 
about it. The larger problem is Internet Explorer 8 and earlier, which is 
still one of the most commonly used browsers on the web. 


Supporting Internet Explorer 


Internet Explorer won't apply CSS rules to any elements it doesn't rec- 
ognize. Here's what the sample page looks like in IEZ. 


/ An HIME 5 Document - Windows Internet Explorer 3 


=D) x} 


GS - lei ais) x fo 


wa Favortes Ф An HTML S Document | [5 QS 


+ Exe Safety~ тоё + 


Pie 


Hello! HTML 5 


An example page by Rob Crowther 


The first article. The second article 


But all is not lost. You can trick IE into recognizing elements with a bit 


of JavaScript. This code will persuade IE that the <section> element 
exists and should have styles applied to it: 


document.createElement("section"); 


(C An IML 5 Document - Windows Internet Explorer E 


G--ie! ze х 6 


Favorites An MTM. 5 Document &-H-om- 
à 


Hello! HTML 5 


An example page by Rob Crowther 
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Here's the final listing, with each element we want to use enabled in IE: 


«script» 
document.createElement("header"); 
document.createElement("nav"); 
document.createElement("article"); 
document.createElement("section"); 

</script> 


<style> 
header, nav, section, article { 
padding: 4px; margin: 4px; display: block; } 
header { background: #000; color: #999; } 
nav { border: 4px solid #000; } 
section { border: 4px dashed #000; } 
article { border: 2px dotted #000; } 
</style> 


Enabling HTML5 support in Internet Explorer with htmlb.je 


Rather than work out for yourself what elements you need to fix in 
Internet Explorer, you can use one of the freely available compatibility 
scripts. A simple one with a good following is html5.js, available at 
http://code.google.com/p/html5shiv/. 


Of course, the main drawback of these approaches is that they won't 
work if JavaScript is disabled in the browser or if something blocks 
your JavaScript from being downloaded, such as a corporate content 
filter or a personal firewall. Although this is likely to be a small per- 
centage of users for most sites, you should do some analysis of your 
existing site visitors before embarking on an HTMLS redesign. 


Summary 


In this chapter, you've learned about the new markup elements in 
HTML5 and the formal structure provided for them, and the elements 
inherited from HTMLA, provided by the outlining algorithm and the 
content model. You've looked at several popular websites and seen 
how the content they display fits naturally into the new semantic ele- 
ments of НТМІ5, reducing the need for content authors to add seman- 
tic meaning to neutral <div> and <span> tags through the id and class 
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attributes. You've also seen how the new global attributes in HTML5 


allow you to extend the expressive power and accessibility of HTML 
documents. 


NOW THAT YOU'VE LEARNED HOW HTMLS IMPROVES MATTERS FOR THOSE 
WRITING TRADITIONAL HTML DOCUMENTS, IT'S TIME TO MOVE ON TO THE 

— МАІМ FOCUS OF HTMLS: MARKUP FOR APPLICATIONS. WE'LL START IN THE 
NEXT CHAPTER WITH A LOOK AT THE ENHANCED SUPPORT FOR FORMS. 
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This chapter covers 


* New input types in HTML 
* HTML5 form features for improved user experience 


s Automatic client-side form validation 


Forms are fundamental components of web applications. This chapter 
starts with a quick review of the limited options offered in HTML4 and 
then moves on to the new form controls HTML5 adds. We'll investigate 
the built-in validation features offered in НТМІ5 and then look at more 
new field types that take advantage of that functionality. After that, we'll 
examine some other new features in HTMLS5 forms, such as placeholder 


USER FRIENDLY by J.D. “Iliad” Frazer 
I NEED A FORM ON OUR WEBSITE 


IT'S WIN-WIN. I GET RID OF MY OLD 


SO PEOPLE CAN TELL ME THEIR IPOD, AND THEY GET TO RECEIVE DON'T WASTE TIME WITH THAT. 
EMAIL ADDRESSES. TARGETED MARKETING EMAILS JUST SLAP IT TOGETHER 
WHAT MAKES YOU |; BASED ON THEIR INFO. TIME IS MONEY! 
/ THINK PEOPLE OK IT'LL TAKE ME A 
WILL WANT TO? DAY TO CODE ИР THE 
VALIDATION. 


COPYRIGHTS) 2009 J.D, "Itllad" Frazer HTTP;/ /WWW.AUSERFRIENOLY,ORG/ 
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text and autofocus, before taking a look at the current state of browser 
support and learning how you can take advantage of these new fea- 
tures without leaving older browsers behind. 


The limitations of HTML4 forms 


HTMLA has a paltry selection of input types: three ways of entering 
text and three ways of selecting from a predefined list of options. Let's 
review what's available in HTML4 before you learn about the new fea- 
tures available in HTMLS: 


The text input is the workhorse of 


[abc 
НТМІА forms: Е 


<input type="text" value-"abc"» 


Usually, when you can’t predict what 
the user will want to enter but know it 
will be fairly short, you have to use an 
input of type text. This includes user- 
names, dates and times, search terms, 
email addresses, URLs, telephone num- 
bers, currency, credit card numbers, and 
any simple numeric values. 


If the user needs to choose from a lim- 
ited number of possible values, you can 
use a <select> element. A <textarea> ele- 
ment is for larger amounts of free text, 
when you expect paragraphs rather than 
a few words: 
«select» 

«option selected>Option 1 

</option> 

<option>Option 2</option> 

<option>Option 3</option> 
</select> 
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The <select> element allows the user to 
select from predefined options. It’s nor- 
mally a drop-down list (top), but you 
can also use the size attribute so that 
more than one option shows (bottom): 
«select size="3"> 
<option selected>Option 1 
</option> 
<option>Option 2</option> 
<option>Option 3</option> 
</select> 
<textarea>abc</textarea> 


An alternative to the <select> element is 
the use of radio buttons. These are 
another type of <input> element, but, in 
normal circumstances, there’s more than 
one ina set. They’re linked by having 


the same value for their name attribute: 


«label for="exradiol">Radio 1: </label> 
<input type="radio" id-'"exradiol" 
name="exradio"> 

«label for="exradio2">Radio 2: «/label» 
<input type="radio" id="exradio2" 
name="exradio"> 

«label for="exradio3">Radio 3: «/label» 

<input type="radio" id="exradio3" 
name-"exradio" selected» 


Within a set of radio buttons, only one 
can be selected at a time. If you want the 
user to be able to select multiple items, 
you can use either the «select» element 
or a set of check boxes: 
«label for="excheckbox1"> 

Checkbox 1: 


«/ label» 
«input type="checkbox" 
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Option 2 
Option 3 


Option 1 В 
Option 2 | | 
Option 3 |~} 


Radio 1: 


Radio 2: 


Radio3: © 


Checkbox 1: 


Checkbox 2: 
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name-"checkbox1" id="excheckbox1"> 
«label for="excheckbox2"> 
Checkbox 2: 
</label> 
<input type="checkbox" 
name-"checkbox1" id="excheckbox2"> 


Finally, this example shows the <field- EXAMPLE 


UPLOAD FILE 


set» element with its «legend», a file- = 


upload input, and a submit input: е 


<fieldset title="Other form elements"> 
«legend-Example«c/legend» 
«label» 
Upload file 
«input type="file" name="name"> 
«/label» 
</fieldset> 
«input type="submit"> 


The <fieldset> and <legend> elements are useful for grouping sets of 
controls together in long forms. When used correctly, they’re also good 


HI, I'M STEF MURKY OF 


COLUMBIA INTERNET CUSTOMER SURVEY COLUMBIA INTERNET. 
И SIGN UP FOR OUR FREE 
ins а NEWSLETTER BY FILLING 
peal шлу IN THIS FORM. ALL 

COMPLETED SURVEYS 
POSTAL CODE PROVINCE Please select... : WILL BE ENTERED INTO 
теште A PRIZE DRAW ТО WIN 


PERSONAL INFORMATION AN IPOD* W \ 


DATE OF BIRTH — Á&— 
| 


SURVEY 


AVERAGE NUMBER OF HOURS SPENT BROWSING PER 
DAY: 


WHICH WEB BROWSERS DO YOU USE REGULARLY?: 


INTERNET EXPLORER FIREFOX 
SAFARI CHROME. 
OPERA OTHER 


WHAT 15 YOUR FAVORITE WEBSITEP?: 


Submit Query 


*TERMS AND CONDITIONS 
AVAILABLE ON REQUEST 
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for accessibility. The file control is a way to transfer files to the server, 
and the Submit button is the most obvious way for the user to send the 
entire form back to the server. This set of controls has existed mostly 
unchanged since before forms were first added to the standard in 1996. 
You can build Stef’s sign-up form out of these rudimentary controls. 


The figure shows Stef’s form implemented using HTML4 form con- 
trols. The full source code is available for download from www.manning 
.com/crowther/. If you're in the United States and wondering what a 
postal code is, it’s similar to a ZIP code — remember that Columbia 
Internet is a Canadian ISP. 


ALOT OF THE IDEAS FOR HTMLS FORMS WERE TAKEN FROM THE XFORMS 2 PROPOSAL, 
A PARTNER STANDARD IN WHAT WAS TO BE THE XML-BASED FUTURE OF THE WEB WITH 
XHTMLZ (SEE APPENDIX A FOR MORE DETAILS) 


But the HTML4 forms solution requires a number of compromises. It 
uses text inputs for purposes such as numbers and email addresses. For 
the rest of this chapter, you'll learn about the new form controls pro- 
vided by HTMLS, which are more appropriate for such input. 


Numbers, ranges, dates, and times 


HTMLS introduces several new form controls that didn't exist in 
HTML4; they give you more precise control over how you gather user 
input. In HTMLA, all text inputs were just that: text. HTML5 signifi- 
cantly expands the range of controls available, not least by providing 
two ways of entering numbers and multiple controls for dates and 
times. We'll look at these new controls for numbers, dates, and times in 
this section. 


Form submission 


For a form to be useful in this scenario, there needs to be some server-side pro- 
cessing to deal with the form values the browser sends when the user clicks Sub- 
mit Query. We don't want to get bogged down in backend issues in this book, so 


www.it-ebooks.info 


Numbers, ranges, dates, and times 


(continued) 


we assume that one of the techies—Mike, Miranda, or Pitr—will take care of that. 
If you want to test your own forms to see what values they’re sending to the serv- 
er, you can create a simple PHP file: 


<?php 


foreach ($_POST as $field name => $field_value) { 
print "Field $field_name : $field_value <br />\n"; 


} 


?> 
At the top of your HTML form you'll then have some code like this: 


«form action="collector.php" method="post"> 


A prebuilt collector.php is available for download from the book's website at 
www.manning.com/crowther/. 


Number | Range | Datetime 

к е 5 4 20 
$ 
5 MOST OF THE SCREENSHOTS 
x Е E " IN THE FOLLOWING SECTIONS СА 
5 WERE TAKEN IN OPERA 1160 
e AND 12 BECAUSE THAT WAS 
Б р” THE FIRST BROWSER ТО ADD ~~ 
e a 10 10 ~ FULL SUPPORT FOR THE NEW 
5 CONTROLS. EXCEPTIONS a 
[7] 
5 ARE MENTIONED IN THE TEXT. 
lo 
o 
a 

Ө‘ 

The basic number input provides а spinbox: a 


«input type="number" value-"4"» 


Normally the arrows increment or decre- 
ment by 1, but you can adjust this by using 
the step attribute. This example increments 
in steps of 2: 


«input type-"number" value-"4" step="2"> 
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. D 
If an exact number isn't necessary, you can c 
use a range control. In the browser, this 
renders as a slider: 


«input type-"range" min="1" 
max="10" value="2"> 


As you can see, the exact value of the range input isn’t clearly visible. 
In practice, you might use it for large numbers where accuracy isn’t 
important. As with the number control, you can specify a step value: 


<input type="range" min="0" max="1000" value="20" step="20"> 


IF YOU WANT TO USE RANGE FOR А NUMERIC INPUT, THE BEST APPROACH IS TO 
| EITHER LABEL THE HIGH AND LOW VALUES IN YOUR HTML OR PROVIDE SOME 
№. _— OTHER USER FEEDBACK WHEN THE CONTROL IS ADJUSTED-PERHAPS WITH AN 
\ <output> ELEMENT (SEE THE SECTION “ELEMENTS FOR USER FEEDBACK") 
N IN THE MEANTIME, LET'S MOVE ON TO DATES AND TIMES. 


Create a simple date input like this: 
<input type="date"> 


In its unexpanded state (top), it looks 
similar to a <select> element. But if you 


Mon Tue Wed Thu 


activate the control, a date picker pops 
up (bottom). 


The value returned from the date control, 


and any default value you want to set, are 
in the format yyyy-mm-dd. Using this 
standard ordering prevents any confu- 
sion relating to date formats in different 


countries. 


WHAT THE DATE PICKER LOOKS LIKE IS 
LEFT UP TO THE BROWSER. CURRENTLY 
THERE'S NO WAY TO STYLE IT THROUGH CSS, 
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Next, the time input: 10:30 |2 
«input type="time" value="10:30"> 


Again, styling is determined by the 


browser. 


If you want the user’s local time, use [2010-05-31 |< | 21:00 23 
a May > ][2010 2 
Mon Tue Wed Thu Fri Sat Sun 


datetime-local: 


«input type-"datetime-local" 
value-"2010-05-31T21:00"» 


This looks the same asthe datetime control | ^ 23 25 26 27 28 B® 39 
but without the UTC annotation. In this 


example, you can see how to specify a 
default value for the datetime and 
datetime-local input types: 
yyyy-mm-ddThh : mm. 


As well as full dates, you can have months 12010-05. 3 
or weeks: 


«input type="month" 
value="2010-05"> 


Mon Tue Wed Thu 


<input type="week"> 


In Opera, these look identical to the full 
date picker, but some browsers may 


choose to implement a custom UI. 


USER FRIENDLY by J.D. “Iliad” Frazer 


I NEED TO BE ABLE TO EDIT THE 
WEBSITE. THE CHIEF SAID YOU 
HAD TO HELP ME. 


I DON'T WANT TO MESS AROUND YOU KNOW A CHILD WHO CAN 
WITH ALL THAT CODE STUFF! HELP YOU WITH THE EDITING 
MAKE IT LIKE WORD. SO EASY 

EVEN A CHILD COULD USE IT. 


OK Т HAVE A 
BOOK ON HTML 
I CAN LEND YOU. 


COPYRIGHTE)2009 J.D. "illad" Frazer MTTP;//WWW.USERFRIENDLY.ORG/ 
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Validation 


Validation is often a crucial issue on the web, both for security and for 
general smooth operation of apps, but it’s something that content 
authors frequently get wrong. HTMLS has built-in form-validation fea- 
tures. In this section, we'll look at how you can specify that filling in 
certain fields is required, delimit numeric inputs with maximum and 
minimum values, and define arbitrary format requirements for any 
other text field with regular expressions. We'll then examine how these 
features interact with CSS and JavaScript to allow you to give useful 
feedback to your users. 


USER FRIENDLY by J.D. "Iliad" Frazer 

YOU MEAN THE AMAZING 

OPPORTUNITY TO RECEIVE 

PRODUCT NEWS AND UPDATES 
HMM, THEY HIT THE | ISN'T ENOUGH TO MAKE THEM 

VALIDATION PAGE AND | KEEP TRYING/? 


THINGS ARE BETTER BUT I'M 
NOT GETTING MANY SIGNUPS. 


BUT THEY DONT SIGN UP! 


ACCORDING TO THE 
STATS, LOTS OF PEOPLE 
f ARE FILLING IN THE FORM 


y/ 


COPYRIGHTS) 2009 3.0. "Iad" Frazer МТТР:/ /WWW.USERIRIENDLY.ORG/ 


Required | Min/Max | Pattern If you're accepting input from users 


through forms, there should always be 
е 5 5 5 validation going on at the server. But 
it provides a better experience to let 
е 4 4 4 users know they've made mistakes 
immediately rather than to let them fill 
ae 10 10 10 out the whole form, submit, wait for a 
response, and only then find out they 
О 9 9 9 made a mistake. 
@ 


Browser support quick check 
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The required attribute 


The simplest form of validation is to mark a field as required. In 
HTMLS this is done by adding the required attribute. If an input is 
marked as required, the browser shouldn't allow the form to be submit- 
ted until the user has provided a value. 


This image shows what happens when a | 
text input is marked as required and the This is a required field 


user tries to submit the form without Е 


entering a value: 


<input type="text" required 
name="myrequiredfield"> 


You can add the required attribute to any ЕЕ 


e of input: 
UP P . , This is a required field i= 


<input type="date" required 
name="myrequireddate"> 

As the image shows, the results of not 

entering a value are the same in both 

examples. 


NOTE THAT Aname ATTRIBUTE IS INCLUDED IN THE EXAMPLE; THIS 

WILL LABEL THE FIELD'S VALUE WHEN IT'S SENT TO THE SERVER. THE 

AUTOMATIC VALIDATION OCCURS WHEN THE FORM IS SUBMITTED, 
SO YOU NEED A SUBMITTABLE FORM FOR THESE EXAMPLES TO WORK. Ep 


l | 


The min, max, and pattern attributes 
The only native validation built into HTML4 for the text input is the 
maxlength attribute. It allows you to specify the maximum number of 
characters the user is allowed to enter. This is somewhat useful for 
things like dates and phone numbers that have a well-defined length, 
but it’s not much use for anything else. 
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IF YOU WANTED A NUMBER BETWEEN 1 AND 99, YOU COULD SET maxlength 
TO 2; THIS WOULD STOP PEOPLE FROM ENTERING 100 BUT NOT -1. AND IF 

— YOU WERE LOOKING TO LIMIT PEOPLE TO A VALUE BETWEEN 1 AND 50, 
maxlength WOLILD BE EVEN MORE LISELESS. 


In HTMLA, you can use the min and max attributes on the number input 
type. You already saw these attributes on the range control, where they 
specify the limits of the slider. On the number control, they trigger an 
error when the user tries to submit the form: 


«input type-"number" max="10" 


name="exnumber"> m= 
The min attribute works exactly the same Please enter a number less than or 
equal to 10 
way: 


<input type="number" min="4" 
name="exnumber"> 


There’s also help if the format you IE 


require is somewhat more exotic. You 


" Please use the required format 
can use the pattern attribute to supply a = A part number is a digit followed by f 
— three uppercase letters. 


regular expression that is then used to 
validate the field. This example is taken 
from the НТМГ spec: 
«input type-"text" name-"partno" 
pattern=" [0-9] [A-Z] {3}" 
title="A part number is a digit 


followed by three uppercase 
letters."> 


If the validation fails, the browser dis- 
plays the value of the title attribute, so 
you should include some information 


there that will help the user in filling 
out the form. 
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Taking advantage of validation with CSS 


In addition to the visible support in the browser for validation (the 
messages you've seen in the earlier screenshots), HTMLS5 provides 
behind-the-scenes hooks for CSS and JavaScript. These let you pro- 
vide immediate visual feedback. CSS has two pseudo-classes that allow 
you to provide different styles based on whether they’re currently valid 
or invalid. 


Here’s a simple pair of CSS rules to put a занан г. 


green outline around valid controls and а eee Й 


dotted red outline around invalid controls: 


input: valid ( 


outline: 5px solid green; 


} 


SS ee 


| ——— A4. | 
input:invalid { 


outline: 5px dashed red; 


} 


The images show the result of applying this 
CSS to these three number controls: 


«input type-"number" required» 
«input type-"number" min="4" 
уа1ие="4"> 
<input type-"number" min="4" уа1ие="3"> 


IN REAL LIFE, OF COURSE, YOU WOULDN'T SPECIFY SOMETHING 
INVALID AS THE DEFAULT VALUE! NOTE THAT THE VALIDITY 
STATE APPLIES EVEN IF THE FORM ISN'T SUBMITTABLE. ~~ 
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The same CSS works equally well with text con- cc] 
trols using the pattern attribute. The three images 


shown here are based on the example from the | rows аллана 
LIlll----ud 


section "The min, max, and pattern attributes": 


pattern-"[0-9] [A-Z] {3}"> 
«input type-"text" 
pattern=" [0-9] [A-Z] 37" 
value="1abc"> 

<input type="text" 
pattern=" [0-9] [A-Z] {3}" 
value="1ABC"> 


pouce m иын 


There's also CSS support for styling required 


bo m m ши m m A T 


controls differently through pseudo-classes: 


input:required { 

outline: 5px dashed blue; CCS 
} 
input:optional { 

outline: 5px solid green; 


} 


The images show the result of this CSS applied to 
these two inputs: 


«input type-"number" required» 
«input type="number"> 


Turning off validation 


Sometimes you want the user to be able to submit the form without 
triggering validation. For example, if a form is long and has many sec- 
tions, you might want to let the user save their progress and come back 
and complete the form later. To do this, HTML5 provides two new 
attributes: novalidate and formnovalidate. 


The novalidate attribute can be applied to the <form> element itself, 
whereas the formnovalidate attribute affects the enter form but should 
be applied only to a Submit button: 


<input type="submit" value="Save for Later" formnovalidate> 
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, : : PROBABLY MORE FORMS 

Now that you ve seen the validation WHERE YOU NEED TO 
‹ 1 ENTER AN EMAIL 

features, lets consider two further DESE Ичүү уланын 
WHERE YOU DON'T. 


new input types: email and url. We 
didn’t look at them until now 
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ON THE WEB, THERE ARE 


because, without HTML5’s validation features, they look and behave 
identical to HTMLA text inputs. 


Browser support quick check 


ecce 


email 


url 


Email addresses 


THAT'S А COMMA 


1 ROB+CROWTHER@DOMAIN.COM 

2. ROB/CROWTHER@DOMAIN.COM 

3 ROB@CROWTHER@DOMAIN.COM 
“a 4, ROB,CROWTHER@DOMAIN.COM 
5. ROB-CROWTHER@DOMAIN.COM 
6 ROB_CROWTHER@DOMAIN.COM 
7 КОВ CROWTHER@DOMAIN.COM 
8 “ROBCROWTHER’@DOMAIN.COM 
q. 'ROB CROWTHER'@DOMAIN.COM 
10, 'ROBCROWTHER'eDOMAIN.COM 


Having seen the pattern attribute, you're probably 
thinking it would be straightforward to either 
write your own regular expression or find one on 
the web and then implement your own email field. 
The problem is, you'd probably get it wrong. Email 
had reached the popular consciousness even before 
the web was born, and despite some confusion, 
most people can recognize an email address. Let's 
have one of our resident experts doa quick test to 
see if you really know what an email address looks 


like. 


PITRS EMAIL VALIDITY TEST WE WILL 


FOR ASPIRING EVIL GENIUSES "EET Ir YOU 
Е" 


VALID? 


OOOUOOOUOOOO 
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Easy? Half of them are valid and half of them invalid; Pitr will tell you 
which ones are which at the end of the section. Note that by valid we 
mean they’re constructed correctly, not that you'll be able to send email 
to them successfully. The reason you'd be almost certainly wrong if you 
implemented an email field yourself is that even the experts can't agree 
on what a valid email address looks like. The HTMLS spec itself is 
“willfully violating" the standard: 


A valid e-mail address ts a string that matches the ABNF production 1*( 
atext / “.” ) “@" ldh-str 1*( "." ldh-str ) where atext is defined 
in RFC 5522 section 5.2.5, and \dh-str ts defined in RFC 1054 section 5.5. 


This requirement ts a willful violation of RFC 5522, which defines a 
syntax for e-mail addresses that ts simultaneously too strict (before the 
"0" character), too vague (after the “@” character), and too lax 
(allowing comments, whitespace characters, and quoted strings in 
manners unfamiliar to most usera) to be of practical use here. 


Here’s the code for this email input: 
«input type-"email"» 


Visually it looks the same as a normal 
text input. 


If you type in an invalid email address 


q 


and submit the form, you'll get an error 


imil h h h Please enter a valid e-mail address 
message sımılar to the one shown here. 


IN HTMLS, THE INVALID EMAILS 
ADDRESSES ARE BEINK 3, 4, 7, 8, AND Я. 
1, 2, 5, 6, AND 10 ARE BEINK VALID. 
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Forms in which you enter a URL are also common. Think about the 


last time you posted a comment on a blog; it’s likely the form included a 
URL field. Like email addresses, valid URLs have some esoteric rules, 
but HTML5 means you don't need to worry about what they are. 


Creating a URL control is as easy as 


changing the type: 


«input type="url"> 


Again, there’s no visual indication that a 


и 


URL is required. But when you attempt 


to submit an invalid URL, you get a 4 


similar message. 


Please enter a valid web address a 
= ——————————— 


Elements for user feedback 


Sometimes you may want to show the user a result—something calcu- 


lated from the values on the rest of the form. Think of a shopping cart 


that shows the running total of the user’s expenditures. In HTML4, you 


could use JavaScript to insert the value into a read-only field, or you 


might have written the value into the HTML content, but there was no 


way to indicate that the field or the value had any sort of relationship to 


the form values or even was part of the 


Browser support quick check 


Meter form at all. HTML5 changes all that with 


Output | Progress 
е 13 8 8 
е 4 6 6 
Q 10 10 » 
О 9 11 11 
Ө *| з 


its three built-in form controls for user 
feedback: output, progress, and meter. 


The <output> element 


The <output> element allows you to 
declare a relationship between one or 
more <input> elements and its own 
value. The value of the <output> element 
can be anything you'd have been happy 
to put in an «input» element in HTML4, 
such as text, numbers, and dates. 
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To see <output> in action, first create a couple of numeric form inputs in 


a <fieldset>: 


<fieldset> 

<Legend>Output example</legend> 

«label for="one">Number: </Label> 

<input type="number" name="one"> 

«label for="two">Range: «/label» 

«input type="range" name="two" min="0" max="10"> 
</fieldset> 


Now add an <output> element just 


Number: 64 
before the closing </fieldset>: 
«label for="out">Output: «/label» 
«output id-"out" Ғог="опе two"> Range: iL 
0 
</output> 
Output: 11 


The value goes between the tags 
rather than in an attribute as with 
an <input> element. The for 
attribute indicates the fields 

with which the <output> is 
associated. 


Finally, you need some script to update the <output> element when 
there is input. You do this on the parent <fieldset> element: 


<fieldset oninput-"out.value = one.valueAsNumber + two.valueAsNumber; "> 


THE EXACT RELATIONSHIP BETWEEN THE <input> ELEMENTS LISTED IN THE for 
ATTRIBUTE AND THE <output> VALUE HAS TO BE DEFINED IN CODE. HTMLS DOESN'T 

p ATTEMPT TO GUESS WHETHER YOU WANT TO ADD, SUBTRACT, MULTIPLY, OR CALCULATE 
INTEREST. WE'LL DISCUSS THE oninput EVENT LATER IN THIS CHAPTER. 


CZ 
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The <progress> element 
You often see complex processes broken into several steps. Buying a 
book at Amazon, for instance, usually proceeds through pages for 
entering your personal information, entering your credit card details, 
and entering the delivery details, among others, before finally confirm- 
ing your purchase. If you make a purchase at Amazon you'll notice, at 
the top of the screen, a progress indicator. 


| а. Select a Shipping Address - Am... | $ 


amazoncouk ———« 
М7 ^ M 


ADDRESS 


Choose a delivery address 


This follows user interface design best practice: when you're putting a 
user through a multistep process, always give them an indication of 
how far along they are. This is such a common requirement that 
HTML5 adds a special element to support it: 


«progress value="5" min="0" max="9">5 out of 9«/progress» 


WebKit has an initial implementa- Progress Ss 
tion in its nightly builds. 


The max attribute gives the value that represents completion and the 
value that indicates how close to completion you are. The <progress> 
element can contain phrasing content—text, inline markup, and 
images — but no other <progress> elements. You could represent Ama- 
zon's progress bar like this: 


«progress max-"7" value-"2"» 
«img src-"order-progress-step-2.png" alt="Step 2 of 7"> 
«/progress» 


The «progress» element can also be used in applications to give feed- 
back on long-running operations like file uploads. 


THE «progress» ELEMENT HAS STRONG NATIVE SEMANTICS FOR THE 
PLIRPOSES OF ARIA. IT SHOULD BE REPORTED ALITOMATICALLY AS 

BEING IN THE ARIA progressbar ROLE BY SUPPORTING AGENTS. AS —~ 
WE DISCUSSED IN CHAPTER f, THIS IMPROVES THE ACCESSIBILITY 
OF YOUR WEB APPS WITH NO EXTRA EFFORT ON YOUR PART. 
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The <meter> element 
The <meter> element is similar to <progress> but more general-purpose 
in its semantic value. It should be used to indicate a scalar measure- 
ment within known bounds—for example, disk-space usage, progress 
through an audio track, or share of a popular vote. 


Chrome has support for the <meter> Meter =m 
element in version 6: 
<label for="exmeter">Meter</label> 
<meter id="exmeter" 
value="3" min="1" max="6" 
high="5" low="2" optimum="3"> 
3 out of 6 
</meter> 
Note the high and low attributes — 1f Meter — 
the value encroaches into them, it 
has a visible effect: 
«label for="exmeter">Meter</Label> 
«meter id="exmeter" 
value="5" min="1" max="6" 
high="5" low="2" optimum="3"> 
5 out of 6 
</meter> 
As with the <progress> element, Meter 5 out of 6 


browsers that don’t support the 
<meter> element display the fallback 
content between the opening and 
closing tags. Although we use text 
here, you can include an image or 
even some SVG that more closely 
resembles the rendering of the 
browsers that do support <meter>. 
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Less-common form controls 


Numbers, dates, times, email addresses, and URLs—these are all fields 
you're likely to need in nearly every form, but НТМІ5 doesn't stop 
there. There are some additional form controls that you'll need either 
less regularly or when you're building particular types of web applica- 
tions. These controls so far lack implementations or common use cases, 
but they may see more uptake in the future as HTML is used for more 
desktop-style (or mobile) applications. 


Pilea Cae Telephone numbers 


You don’t often need telephone numbers in a 


G 20 1 web app, but they're a common requirement 


for things like credit card forms, so HTML5 
4 z 1 has an input type for them: 


<input type="tel"> 


But the format for a telephone number is 
9 n 3 unpredictable. Phones tend to deal in strings 
of digits, but people break them into inter- 
4 m 1.2 national dialing codes, area codes, and local 


Browser support quick check 
eoce 
© 
1 
1 


numbers with spaces, brackets, and dashes. 


WHAT VALUE CAN 
THESE FORM FIELDS HAVE? IT’S AN ACCESSIBILITY 
THE tel TYPE SEEMS PARTICULARLY WIN-YOU CAN TELL USERS WHAT 
USELESS-IT DOESN'T EVEN TYPE OF INFORMATION THE FIELD 
OFFER VALIDATION. EXPECTS EVEN IF THE PAGE 
E CONTENT DOESN'T MAKE 
SURELY IT CLEAR. 
THERE'S MORE / 
à TO IT THAN 


THAT. IT’S ALSO HELPFUL IN FORM 
ALITOFILL FUNCTIONALITY. THE 


BROWSER CAN OFFER ONLY EMAIL SP 
ADDRESSES YOU'VE PREVIOUSLY 
USED FOR EMAIL FIELDS AND 

PHONE NUMBERS FOR TELEPHONE 

FIELDS. MOBILE BROWSERS CAN 

AUTOMATICALLY INSERT YOUR 

OWN PHONE NUMBER. 
MY BROWSER SEEMS \ 
/ || М, 


TO DO PRETTY WELL BUT IT’S BASED ON 


WITH THAT-ALREADY. GUESSING AND HEURISTICS. 
THE EXTRA INFORMATION MAKES 
IT MORE ACCURATE. 
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The HTMLS spec therefore doesn't specify a format; the tel type is 
basically the same as a text input other than in its semantic content. If 
you want to enforce a particular format on the tel field, you ll have to 
use the pattern attribute discussed in the section “The min, max, and 
pattern attributes.” 


Color pickers 


Color isn’t widespread in today’s web forms. But because one of the 
key focuses of HTMLS is to enable HTML applications, color pickers 
are likely to be a more common requirement in the future. The first 
implementation of the color input type is in Opera 11. 


The HTML5 markup for a color picker is A- 


<input type="color"> 


The default value is #000000. Selected 
values are always in #rrggbb hexadecimal 


shorthand. 


When the user expands the control, a 
selection of common colors is presented. 
Currently there’s no way to configure this 
set of colors, but clicking the Other button 
brings up the full color picker. 


#000000 
Other... 


Hue: 0 5 Red: 0 ^ 
p 
Saturation: о (2 Green: |0 |^ 
Value: о i Blue: |0 |$ 
Colour name: [#000000 
E 
Cancel OK 
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<keygen> 
P THE PURPOSE OF «keygen» IS TO PROVIDE AN АРІ INTO YOUR OPERATING 
SYSTEMS CRYPTOGRAPHY STORE. IT ALLOWS PUBLIC/PRIVATE KEY 
EXCHANGE TO TAKE PLACE BETWEEN YOU AND THE SERVER. IF THAT DOESN'T 
MAKE. ANY SENSE TO YOU. IT'S SAFE TO SKIP AHEAD TO THE NEXT SECTION. 
Pos 2) 


<keygen> originated as a proprietary feature in Netscape Navigator. It 
was then reverse-engineered by Opera and WebKit. As long as the ele- 
ment is useful, the HTML5 way is to document existing behavior so 
that everyone can implement in an interoperable manner. We won't 
use «keygen» in this book, because it depends on relatively complex 
server-side code to be useful, but it's mentioned here for completeness. 


= 


YOU'VE NOW LEARNED ABOUT THE MANY NEW INPUT TYPES > = 
AND ELEMENTS AVAILABLE IN HTMLS FORMS, ВИТ IT DOESN'T | @ 9 у 
STOP THERE. THE NEXT SECTION INVESTIGATES NEW FORM —~_ J el 
FEATURES THAT AREN'T TIED TO SPECIFIC ELEMENTS. Т 


New attributes for the <input> element 


placeholder | autofocus | autocomplete In addition to the ее form con- 
trols in HTML5, existing HTMLA 
x е 10 6 17 form controls have been 
Ф . . 
[o extended with new attributes. 
x D 
о е 4 4 4 You've already seen some of 
3 . . . . 
t these in the section on validation, 
8 Q 10 10 10 “The required attribute,” where 
a we covered attributes such as 
О 11 11 10 required and pattern, but several 
2 : 
E others can be applied to most 
Ө 5 5 5 <input> elements: placeholder, 
autofocus, and autocomplete. 


Placeholder text 


A popular technique in recent years has been to put a suggestion for a 


field’s required user input in the field by default. This is called 
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placeholder text. Here are two examples of placeholder text on the 
Firefox search bar and on the WordPress login. 


Log 


a ^ 


THIS APPROACH IS POPULAR WITH DESIGNERS BECAUSE USING FIELD NAMES 
AS PLACEHOLDERS DOESN'T TAKE ИР ANY EXTRA SPACE, BUT PROVIDES THE 
~ —7 USER WITH USEFUL INFORMATION ABOUT THE EXPECTED INPUT. IT’S ALSO A 
EY COMPACT WAY OF INDICATING THE DESIRED INPUT FORMAT. 


There are several common approaches to achieving this look with 
JavaScript. They mostly boil down to two alternatives: 

^ Make the input transparent, and place the label element behind it. 

^ Hide the label element, but copy the text of the label into the input. 
You then have to add J avaScript to remove the placeholder text when 


a user clicks the control and put it back if the user leaves the control 
without entering a value. But a number of issues can occur: 


1 Errors in the JavaScript can stop the placeholder text from being 
removed when a user clicks into the element. If users have JavaScript 
disabled, the text won't work properly or at all. 


2 The placeholder can interfere with browser form-fill functionality that 
remembers values for frequently used forms. 


3 Assistive technology has no way of distinguishing between placeholder 
text and valid input. 


HTMLS HAS SUPPORT FOR PLACEHOLDERS BUILT IN THANKS TO THE 
NEW placeholder ATTRIBUTE. ADD THIS ATTRIBLITE TO THE 
"d «input» ELEMENT WITH THE VALLIE YOU WANT TO USE. 
ж? 
ү I 
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<input type="email" (email@example.com — ] 
placeholderz"emailQGexample.com"- 


You're protected from JavaScript errors causing issues because the 


functionality no longer depends on your (or indeed, any) JavaScript. 
Browsers can handle the interaction with native functionality better 
because everything is now under their control; and for the same rea- 
son, browsers can keep assistive technology better informed of what's 
going on. 


Form autofocus 
As a convenience, many web forms use JavaScript to put the focus on 
the first «input» element when the page loads. For instance, if you visit 
the Google homepage and start typing, the text will appear in the 
search field in the middle of the page. Rather than have everyone write 
their own JavaScript routine to achieve this, HTML5 adds support 
directly to HTML: 


<input type="text" autofocus» 


USER FRIENDLY by J.D. "Шаа" Frazer 


WHAT IS POINT OF AUTOFOCUS IT WILL BE EASY TO DISABLE A TRAINEE EVIL GENIUS WILL 
ATTRIBUTE? NOT MUCH SHORTER |2 WITH A BROWSER PREFERENCE. FIND A SETTING ABIT EASIER. 
THAN EQUIVALENT JS. 
ALREADY CAN DO THIS. SUPPOSINK SO. 
MAKING IT PART OF THE BE DISABLINK IN SOURCE STANDARDS OF EDUCATION 


CODE AND RECOMPILINK. DROPPINK ALWAYS. 


COPYRIGHTIC) 2005 J.D. "Had" Frazer MTTP://WWW.USERFRIENOLY.ORG/ 


Protecting private information with the autocomplete attribute 
The autocomplete attribute allows you to provide a hint to the browser 
that the values entered into a field shouldn’t be remembered for future 
use by the browser’s auto-form-filling functionality. This could be 
because the field accepts information that’s supposed to be secret (for 
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instance, a PIN number) or because the field expects a one-off value 
where past values entered are likely to be irrelevant (such as a pass- 
word-reset code): 


<Label>Account: <input type="text" name="ac" autocomplete="0ff"></lLabel> 
<Ларе1>РІМ: <input type="password" name="pin" autocomplete-"off'»«/label» 


Extending forms with JavaScript 


THERE ARE SEVERAL OTHER ENHANCEMENTS TO FORMS IN HTMLS OVER AND ABOVE 
THE NEW CONTROLS. THESE INCLUDE WAYS TO ACCESS VALIDITY INFORMATION 
THROUGH JAVASCRIPT AS WELL AS CONVENIENCE FEATURES THAT EITHER 
COMPLETELY REPLACE THE JAVASCRIPT YOU WOULD COMMONLY WRITE FOR 
OYA EVERY FORM TODAY OR MAKE VARIOUS SCRIPTING OPERATIONS MUCH EASIER. 


Customizing the validation messages 


The default validation messages are a little bland. And although the 
pattern attribute allows you to include a custom message in the title 
attribute, there’s no attribute you can use to provide a custom message 
to the other input types. But you can supply a custom message in 
script. 


Use the setCustomValidity property of 


the <input> element in the DOM: 
Nameless ones are not allowed to take 
var fldName = - Part E 


document.getElementById('fullname'); 
fldName.oninvalid - 
function О { 
fldName.setCustomValidity(""); 
if (!fldName.validity.valid) { 
fldName.setCustomValidity( 
"Nameless ones are not " + 
"allowed to take part" 
2; 
} 
1 
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As you can see, your message is displayed if the field fails the validity 
check. In this case the required attribute was set on the text field like this: 


«input id="fullname" type="text" required» 


Also, for the oninvalid event to fire, the form must be submitted; see 
more on this in the section “Triggering validation with JavaScript.” 


NOTE THAT THE FIRST STEP IN THE FUNCTION IN THE PRECEDING CODE 
SNIPPET RESETS THE CLISTOM VALIDITY MESSAGE TO AN EMPTY 
STRING. THIS IS BECAUSE SETTING THE CUSTOM VALIDITY MESSAGE 
FORCES THE VALID STATUS TO BE FALSE. IT WILL BE IMPOSSIBLE TO 
SUBMIT THE FORM AFTER THE ERROR IF THE MESSAGE ISN'T RESET. 


Overriding the invalid event on the form element in question lets you 
take more complete control of the user experience while still taking 
advantage of built-in validation. 


Check the validity property in the 
DOM, and add your own code to 
report the validity status: 


JavaScript 
var fldEmail = {т <localhost> 
document.getElementById('email'); You can't fool me, that's not a valid email 
fldEmail.addEventListener( О Stop executing scripts on this page [ — ok — J 
'invalid', 
function(event) { 
alert( 
"You can't fool me, " + 
"that's not a valid email" 
2; 


event.preventDefault(O; 


} 
‚©а15е); 


This code assumes you have a submittable form with an input like this: 
«input id="email" type="email"> 


The browser will fire the invalid event when the form is submitted and 
there is text which is not a valid email address in the field. Note that the 
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event handler function cancels the default event processing (with 
event.preventDefault()) in order to prevent the message from the 
browser from also appearing. 


Triggering validation with JavaScript 


CY 


A browser will only trigger form validation when the form is submit- 
ted. This is sensible: having error messages pop up repeatedly while the 
user’s trying to fill in the form would be distracting. 


THERE MAY BE OCCASIONS WHEN YOU WANT TO TRIGGER VALIDATION WITHOUT 
SUBMITTING THE FORM-POSSIBLY THE ALLOWED VALUES FOR А LATER FIELD 

_—— ON THE FORM DEPEND ON THE USER ALREADY HAVING ENTERED A VALID EMAIL 
ADDRESS, OR MAYBE THE INPUT ISN'T PART OF A FORMAT ALL. 


Suppose you have an email input in your HTML, like this: 
«input id="email" type="email"> 
You can trigger validation by calling the checkvalidityO method: 


document.getElementById('email').checkValidityQ ; 


IN OPERA, THE FIELD WILL BE VALIDATED AS IT WOULD BE WHEN THE FORM IS 
SUBMITTED. THUS IF THE EMAIL ADDRESS IS INVALID, THE NORMAL MESSAGE 
WILL POP UP, ALTHOUGH THIS ISN'T REQUIRED BY THE SPEC. THE METHOD ALSO 
WORKS IN FIREFOX 4 AND RECENT CHROME AND SAFARI RELEASES, RETURNING 
false IF THE EMAIL ADDRESS IS INVALID. YOU CAN USE THE RETURN VALUE TO 
IMPLEMENT YOUR OWN NOTIFICATIONS. 


Responding to any changes in value 


a т] 


( 


à 


Before HTML5, when you had to write your own form-validation code, 
it was a common technique to attach the JavaScript validation to the 
onchange event handler. But in HTMLA, onchange was only a valid attri- 
bute on «input», «select», and «texta rea», and it was fired only when the 
form control that changed lost focus. 


AN EVENT HANDLER IS A HOOK HTML PROVIDES TO JAVASCRIPT TO LET YOU RUN 
CODE WHEN PARTICULAR THINGS HAPPEN. YOU MIGHT WANT TO KNOW WHEN THE 


_A 
CA | PAGE FINISHES LOADING (onload), OR WHEN THE USER CLICKS SOMETHING 
Swim 


(onclick), OR, AS IN THIS CASE, WHEN THE USER LEAVES AN INPUT FIELD IN 
TO FIRE. CHECK APPENDIX D FOR MORE ON EVENT HANDLERS. 


^ WHICH THE VALUE HAS CHANGED (onchange). WHEN THE EVENT HAPPENS, IT IS SAID 
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НТМІ5 provides a new event —oninput —which is fired by any form 
element when the value changes, as the value changes, and allows all 
event-handling attributes to be specified on any element. You've 
already seen this feature in action when we discussed the <output> ele- 
ment. Let’s compare the code that powered the <output> element earlier 
(on the left) with a version that relies on attaching to the event handler 


of each field (on the right): 


«fieldset oninput-"value = <fieldset> 
one.valueAsNumber + «label for="one">Number: «/label» 
two.valueAsNumber"» «input type-"number" name="one" 
«label for="one">Number: </Label> onchange="out.value = 
<input type="number" name="one"> one.valueAsNumber + 


two.valueAsNumber"» 
«label for="two">Range: </Label> 


<input type="range" name="two" «label for="two">Range: «/label» 

min-"0" max="10"> «input type="range" name="two" 
onchange="exoutput1.vaLlue = 

«label for="out">Output: </Label> one.valueAsNumber + 

«output id="out" for="one two"> two. vaLueAsNumber"> 

0 
</output> «label for="out">Output: </label> 
</fieldset> <output id="out" 
for="one two">6</output> 
</fieldset> 


HAVING TO HANDLE CHANGES ON EACH <input> ELEMENT INDIVIDUALLY CAN LEAD 
TO EXTRA CODE, BUT THERE'S A MORE IMPORTANT ADVANTAGE: THE onchange 
EVENT ONLY FIRES AFTER THE USER LEAVES THE FIELD BY TABBING OUT OF IT OR 
CLICKING ELSEWHERE ON THE PAGE. THE oninput EVENT FIRES FOR ANY CHANGE. 


Creating combo boxes with <datalist> 
One type of form control that’s common in desktop applications but 
not available in HTMLA is the combo box, so named because it's a combi- 
nation of a text box and a select list — the user can select from a list or 
free-type a value that isn't on the list. When AJAX was becoming pop- 
ular, one of the most common features of the early JavaScript libraries 


was support for creating combo-box-like features. 
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НТМІ5 adds support for this directly into the markup with the 
<datalist> element. A datalist is a named list of options, similar to the 
list of options in a <select> element, which can then be associated with 
one or more «input» elements using the list attribute. 


In this example, with a screenshot taken in Firefox, the input has been 
associated with a <datalist> with the id value "browsers". When a user 
selects the input, the list of options pops up. The user can pick one of 
the options using the cursor keys or type their own: 


«input type="text" name-"browser" 


list-"browsers"» Firefox| 
«datalist id="browsers"> Internet Explorer 
firefox” —X 2 


«option 

value-"Internet Explorer"> 

«option value="Firefox"> 

«option value="Safari"> 

«option value="Chrome"> 

«option value="Opera"> 
«/datalist» 


At the time of writing, Opera is the only browser to implement the 
color input type and allow the <datalist> element to be attached to that. 
This sets the default colors available on the initial drop-down: 


«input type="color" 


list-"greyscale"» Color: 

«datalist id-"greyscale"» #000000 
«option value="#000000"> Other... 
<option value="#333333"> 
<option value="#666666"> 
<option value="#999999"> 
<option value="#cccccc"> 

«/datalist» 

«input type="color" | -= 

list="rainbow"> color: x 

<datalist id="rainbow"> #0000 

<option value-"£FF0000"» Other... 


«option value="#FFA500"> 
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«option value="#FFFF00"> 

<option value="#008000"> 

<option value="#0000FF"> 

<option value="#4B0082"> 

<option value="#EE82EE"> 
«/datalist» 


Easy ways to work with form values in JavaScript 


This is another feature you've already seen in action. When you're 
dealing with forms in JavaScript, the value is always a string, even if it 
represents a date or a number. Because J avaScript automatically con- 
verts the types of any value involved in an expression, this can easily 
lead to errors that are hard to spot. 


This code looks similar to the code Number: 512 
you saw in the section “The <output> 
element,” but it doesn’t have the 


results you might expect: Range: 


<label for="one">Number: </label> 
<input type="number" 


Output: 53 
уа1ие="5" name="one"> 
<label for="two">Range: </label> 
<input type="range" name="two" 
min="0" max="10" value="3"> 
«label for="out">Output: </label> 
<output id="out" for="one two" 
onforminput="value = 
one.value + 
two.value"»0«/output» 
Can you spot the difference? 
Compare the last two lines with the 
code used earlier (on the right): 
one.value + one.valueAsNumber + 
two.value"»0«/output» two.valueAsNumber"»0«/output» 
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YOU MIGHT EXPECT 5 + З TO ВЕ 8, BUT BECAUSE THE FORM VALUES ARE STRINGS, 
YOU AREN'T PERFORMING ADDITION-Y OU'RE PERFORMING CONCATENAT ION. IT'S 
RELATIVELY STRALGHTFORWARD TO WORK AROUND THE ISSUE IN HTML4, BUT WHY 
SHOULD YOU HAVE TO? HTMLS PROVIDES THE PROPERTIES valueAsDate AND 

CA valueAsNumber SO THAT YOU CAN GET DIRECTLY AT THE VALUES YOU NEED. 


| \ 


Browser support and detecting HTML5 features 


Unlike the structural elements we looked at in chapter 1, the new form 
elements have more complex associated behavior and APIs. The struc- 
tural elements merely had to exist; these form elements have to do 
something for you to be able to say a browser supports them. With 
these more complex requirements, it’s not surprising that support isn’t 
yet as far advanced as it might be. The following table shows the level 
of support in the current and, where known, upcoming versions of all 
the major browsers. 


eee60 @ 
12 14 4 6 8 | 9 |10 | 11.1 11.5 5 5.1 
Input types e. e. ° ° ° ° ° ° ° 
Validation API ° ° ° ° ° ° ° ° ° 
Placeholder ° ° ° ° ° ° ° ° ° 
Autofocus ° ° ° ° ° ° ° ° ° 
Input UI e. e 
Range e. е e. e e e 
Meter ° ° ° ° 
Progress e ° ° ° ° 
Output ° ° ° ° ° ° ° 


Кеу: 

e Complete or nearly complete support 

o Incomplete or alternative support 
Little or no support 
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Browser inconsistencies 
WebKit was one of the first browsers to support the new input types, 
enabling keyboards tuned to the required input type on the iPhone. 
The latest versions support the validation API, but you need to write 
your own code to take advantage of it. Support for the <output> element 
was only added in recent versions, but you can always access the value 
with innerHTML instead. 


Firefox 4 has support for HTMLS forms in the beta release, including 
«datalist». Current versions of Firefox support everything but the new 
input types that require some UI (dates and times, numbers). Firefox 4 
also added default styling for the : invalid pseudo-class; if you want to 
turn that off, use the following in your CSS: 


:invalid { box-shadow: none; } 


Firefox also has an experimental attribute, x-moz-errormessage, to allow 
you to customize the error message: 


<input type-" email" name="email" x-moz-errormessage-"Email please!" 


Detecting eupported features 


As mentioned, if a browser has no support for one of the new form 
input types, it will convert it to an input of type text. This makes it easy 
to detect whether an input type is supported in JavaScript — just create 
an element of the desired type and then immediately look to see if it's a 
text input: 


var el = document.createElement(" input"); 

el.setAttribute("type", "date"); 

if Cel.type == "text") { 
implementDateValidation(); 


THE PREVIOUS SNIPPET CREATES A date INPUT AND THEN CHECKS 

TO SEE WHAT TYPE THE BROWSER THINKS IT IS. IF IT'S text, YOU 
CALL A FUNCTION implementDateValidation TO DEAL WITH NS 

BROWSERS THAT DON'T SUPPORT THE date INPUT TYPE. 
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For date inputs you have to go one step further. If you remember, 
WebKit implements the date input type but doesn’t provide any UI for 
it. To detect if a UI is provided, set a value on the date element that isn't 
a date: 


var el = document.createElement(" input"); 
el.setAttribute("type", "date"); 


el.value = "text"; 

if (е1. value == "text") { 
imp LementDateUI() ; 

} 


IF THE BROWSER IMPLEMENTS THE DATE ИТ COMPONENTS, THEN IT WILL BE 
IMPOSSIBLE TO SET THE VALUE OF THE INPUT TO THE STRING "TEXT". THEREFORE, 
IF THE ELEMENT REPORTS ITS VALUE AS "TEXT" AFTER YOU'VE SET IT, THE UI ISN'T 
IMPLEMENTED BY THE BROWSER AND YOU SHOULD PROVIDE YOUR OWN. YOU MIGHT 
ALSO CONSIDER SETTING AN APPROPRIATE pattern ATTRIBUTE AT THIS POINT. 


You may also want to check whether the user’s browser supports one 
of the new form attributes, such as autofocus or placeholder. Here’s 
some code to do this: 


var el = document.createElement(" input"); 

if C!!C'placeholder' in е1)) (1 
window.alert('Placeholder supported'); 

) else 1 
window.alert('Placeholder not supported'); 


THE EASIEST APPROACH IS TO LOOP THROUGH THE AVAILABLE 
PROPERTIES ON AN ELEMENT AND SEE IF ONE OF THEM IS THE ATTRIBUTE 
YOU'RE LOOKING FOR. THIS SAME APPROACH CAN BE USED FOR ANY OF THE 
OTHER NEW HTMLS ATTRIBUTES, NOT JUST FORM ELEMENTS. 


The final thing you might want to check is whether the browser 
supports a particular event, such as the oninvalid event we discussed 


earlier: 
var eventName = "oninvalid"; 
var isSupported - !!(eventName in el); 
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if ClisSupported && el.setAttribute) { 
el.setAttribute(eventName, 'return;'); 
isSupported = typeof el[eventName] == 'function'; 


} 
if CisSupported) { 
window.alert('oninvalid supported') ; 


THE PREVIOUS CODE TRIES TWO DIFFERENT APPROACHES. FIRST IT LOOKS TO SEE IF 
THE oninvalid EVENT EXISTS IN THE ELEMENT PROPERTIES. IF THAT FAILS, IT TRIES 
TO SET THE EVENT ON THE ELEMENT AND, SIMILAR TO THE EARLIER INPUT-TYPE 
DETECTION, LOOKS TO SEE IF THE TYPE OF THE ATTRIBUTE 15 A FUNCTION. 


YOU DON'T HAVE TO WRITE ALL THIS DETECTION CODE YOURSELF-THERE'S 
ALREADY A LIBRARY THAT WILL DO THE WORK FOR YOU. CHECK OUT THE 

MODERNIZR LIBRARY AT WWW.MODERNIZR.COM. IF YOU DON'T FANCY WRITING ас 
АМҮ OF YOUR OWN FORM-VALIDATION CODE, YOU CAN TRY А DIFFERENT LIBRARY 
THAT ENABLES HTMLS FORMS SUPPORT IN ALL BROWSERS: HTMLS-NOW. 


The html5-now library 


Html5-now is an open source project started by Dean Edwards. Dean 
is famous for writing several drop-in scripts for old versions of Internet 
Explorer, which made them behave in a standards-compliant manner. 
The aim of html5-now.js is to provide a drop-in solution that patches 
the browser's holes in HTMLS5 support. Its currently in alpha, but it 
already provides a lot of support for HTML5 form controls. Download 
it from http://code.google.com/p/html5-now/, and then include it in 
your page like this: 


«script srce"html5-now/html5-now.js"»«/script» 


The result of adding the script to a form can be seen in the screenshots 
that follow. On the left is a screenshot of our HTMLS5 form in Firefox 
3.6; all the HTML5 controls render as text. On the right, after html5- 


now.js is added, the number and date controls work. 
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COLUMBIA INTERNET CUSTO! COLUMBIA INTERNET CUSTOM 


YOUR DETAILS YOUR DETAILS 
NAME em NAME ЕМ) 
оез er ADDRESS er 
TOES PR POSTAL CODE PRC 
ee TELEPHONE 
PERSONAL INFORMAT. 
= ин PERSONAL INFORMATION 

GENDER 

GENDER: 

MALE FEMALE 
MALE FEMALE 

DATE OF BIRTH 

DATE OF BIRTH 1971-09-20 

RE September $ | 1971 2H 

SURVEY 
иу N-T-wW^T-E-8. $ | 
AVERAGE NUMBER OF HOURS SPENT BROWSING PER AVERAGE NUMBER 1234 5 NGPER 
DAY: WH DAY: 6 7 8 9 101112 E Ww 

13 14 15 16 17 18 19 
WHAT IS YOUR FAVORITE WEBSITE?: WHAT 15 YOURFA [1] 21 22 23 24 25 26 | 
| 27 28 29 30 

Submit Query Submit Query 


HTMLS-NOW IS SMART ENOUGH TO FIGURE OUT WHETHER THE BROWSER 
ALREADY HAS SUPPORT FOR PARTICULAR HTMLS FEATURES; IT WON'T INTERFERE 
IF THAT'S THE CASE, SO IT’S SAFE TO USE ACROSS ALL BROWSERS. BUT IT'S A 
HEAVYWEIGHT SCRIPT, SO IF YOU'RE ONLY INTENDING TO USE A SMALL NUMBER 

МА OF HTMLS FEATURES YOU'LL ВЕ BETTER OFF DETECTING THEM DIRECTLY, AS 
DISCUSSED IN THE SECTION “DETECTING SUPPORTED FEATURES.” 


Summary 
In this chapter you've learned about the following: 


^ How the new form input types available in HTMLS greatly increase 
the range of options you had in HTML4 


How you can reduce the amount of JavaScript you have to write to 
validate input 


Other new features, such as autofocus and placeholder text 


Support available in web browsers right now, and how to detect 
what support 1s provided by your users' browsers 


You should now be ready to take your forms to the next level with 
HTMLS5! 


IN THE LAST TWO CHAPTERS, YOU'VE LEARNED ABOUT HTMLS FEATURES THAT 
ARE EXTENSIONS OF COMMON USAGES OF HTML4 MARKUP. IN THE NEXT FEW 
CHAPTERS, YOU'LL LEARN ABOUT SOME OF THE COMPLETELY NEW NN 
FUNCTIONALITY IN HTMLS FOR DEALING WITH MEDIA AND DYNAMIC 
GRAPHICS. WE'LL START IN CHAPTER З WITH A LOOK AT CANVAS AND SVG, THE 
TWO HTMLS TECHNOLOGIES FOR DRAWING GRAPHICS IN THE BROWSER. 
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This chapter covers 


* Using the «canvas» element to draw shapes, text, and images 
* Transtorming existing images with «canvas» 

* Using Scalable Vector Graphics (SVG) in your web pages 

* The strengths and weaknesses of «canvas» and SVG 


• Cross-browser support 


In this chapter, you'll learn about HTMLS’s facilities for dynamic graph- 
ics — graphics that can change in response to user input, data, or simply 
time passing. This could include charts representing network activity or 


the location of people on a map. 


THIS CHAPTER, ESPECIALLY THE PARTS TO DO WITH THE <canvas> ELEMENT, 
WILL MAKE A LOT OF USE OF JAVASCRIPT. IF YOU'RE NOT FAMILIAR WITH 
JAVASCRIPT, YOU SHOULD CHECK OUT APPENDIX D BEFORE PROCEEDING. 
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Getting started with <canvas>: shapes, images, and text 


The <canvas> element is an image you can create with JavaScript. The 
markup for it is similar to an <image> element in that you can specify a 
width and a height; but it has starting and closing tags that can enclose 
fallback content, and it doesn’t reference an external source: 


<canvas id="mycanvas" width="320" height="240" 
style-"outline: 1px solid #999;"> 
Your browser does not support the canvas element. 
«/canvas» 


In a browser that doesn't support «canvas» the fallback content is dis- 
played, as in this screenshot. 


259 
T z 
G < le e\chO03\canvas-1.html -] [|x| |G] coo Pie 


p Favorites @ Canvas example 1 


Your browser does not support the canvas element. 


Browser support quick check: «canvas» 


ecce 


Canvas2D | Canvas 
context text 


4.0 4.0 


YOU MIGHT HAVE A STATIC IMAGE AS 

2.0 35 THE FALLBACK IF IT COULD 

| ` ADEQUATELY PRESENT SOME OF THE 
INFORMATION THAT WOULD BE 8 


DISPLAYED IN <canvas> IN 
9.0 9.0 SUPPORTING BROWSERS. OR, IF YOU C 
WERE PARTICULARLY AMBITIOUS, YOU 
COULD USE AN ALTERNATIVE i | 
RENDERING METHOD SLICH AS FLASH. 
9.0 10.5 
3.1 4.0 
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You may be more interested to see 
what the page looks like in a 
browser that does support <canvas>. 


If you’re wondering where all the 
whizzy graphics promised in the 
introduction are, well, they don’t 
appear by magic. To create pictures 
with <canvas>, there needs to be a 
JavaScript program that tells the 
browser what to draw. 


Before you get to drawing something, you need to understand a couple 
of things. You need to know how to geta reference to your canvas object 
so you can send it drawing commands; and, because you'll be telling the 
<canvas> element to draw shapes ona grid, you need to know how the 
grid is defined. First, here's how to get a reference in JavaScript: 


function draw() { 
var canvas - document.getElementById('mycanvas'); 
if Ccanvas.getContext) { 
var ctx = canvas.getContext('2d'); 
//do stuff 


j 


window.addEventListener("load", draw, false); 


Add this code between <script> tags in the <head> of an HTML docu- 
ment containing a «canvas» element like that shown in the first listing in 
this section. In the following sections, you'll update the draw() function 
to create graphics. If you're confused about what this document should 
look like, please download the code samples from www.manning.com/ 
crowther/ and look at the file ch03/canvas-1.html. 


YOU HAVE TO PASS A PARAMETER, 2d, TO THE getContext METHOD. THIS GIVES 
YOU A TWO-DIMENSIONAL DRAWING CONTEXT. CURRENTLY THIS IS THE ONLY 
PARAMETER SUPPORTED. SEVERAL BROWSER VENDORS ARE EXPERIMENT ING NS 
WITH A THREE-DIMENSIONAL DRAWING CONTEXT WITH DIRECT ACCESS TO 
GRAPHICS HARDWARE, WHICH WILL OPEN UP POSSIBILITIES SUCH AS 3D AA 
GAMES, VIRTUAL-REALITY EXPERIENCES, AND MODELING TOOLS. 
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Drawing shapes 
To draw on the canvas, you need to geta drawing context. The context 
then gives you access to methods that allow the drawing of lines and 
shapes. 


Basic shapes are easy. If you replace the 
previous draw() function, you can draw 
a rectangle by using the filiRect 
method. The only prerequisite is that 
you first set the fill color using the 
fillStyle method. You call the fillRect 
method with four arguments: the x and 
y values of the upper-left corner and the 
width and height to fill: 


function draw() { 

if Ccanvas.getContext) { 
var ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'rgb(255,0,0)'; 
ctx.fillRect(50,50,100,100); 

} 

} 


PIXELS AND TO DRAW AN EMPTY RECTANGLE: clearRect() AND strokeRect(), 


IN ADDITION TO fillRect(), THERE ARE ALSO METHODS TO CLEAR AN AREA OF 
S RESPECTIVELY. THEY TAKE THE SAME PARAMETERS AS Ғ111Кес+ (). 
OY 


| \ 


Let’s extend the code to draw a line. Lines are a little more complex. 
You have to first draw a path, but the path doesn’t appear until you 
apply a stroke. If you’ve ever used graphics software like Photoshop, 
this process should be familiar to you. 
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The movero method moves the “pen” without recording a path, and the 
lineTo method moves the pen and records a path: 


function draw() { 
var canvas - document 
.getElementById('mycanvas'); 


if Ccanvas.getContext) 1 
var ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'rgb(255,0,0)'; 
ctx.fillRect(50,50,100,100); 
ctx.strokeStyle - 

"rgb(0,127,127)'; 

ctx.moveTo(50,50); 
ctx. LineTo(150,150) ; 
ctx. LineWidth = 5; 
ctx.strokeQ; 

} 

H 


Now for a little experiment. What 


happens if the line is drawn first and 
then the box? 


function draw() { 
var canvas - document 
.getElementById('mycanvas'); 


if Ccanvas.getContext) { 

var ctx = canvas.getContext('2d'); 

ctx.strokeStyle - 
"rgb(0,127,127)'; 

ctx.moveTo(50,50); 

ctx. LineTo(150,150) ; 

ctx. LineWidth = 5; 

ctx.strokeQ; 

ctx. fillStyle = 'rgb(255,0,0)'; 

ctx. fillRect(50,50,100,100) ; 


I 
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As you can see, the line is mostly obscured by the rectangle. You might 
think that if you could remove the rectangle the line would still be there 
underneath; but after you've drawn over it, the line is gone. 


AND THE LINE AND THEN DRAW THE LINE AGAIN. THE «canvas» ELEMENT 


THE ONLY WAY TO GET THE LINE BACK IS TO ERASE BOTH THE RECTANGLE 
DOESN'T STORE THE ELEMENTS DRAWN, ONLY THE RESULTING PIXELS. 
Ж? 


WR 


What about other shapes? The path-then-stroke approach is the way to 
do it. You can use the arc method to draw a circle and then fill it. The 
arc method accepts parameters for the location of the center; the 
radius; how far around, in radians, the arc should extend; and whether 
that should be clockwise or counterclockwise: 


function draw(){ 

var canvas = document 
.getElementById('mycanvas'); 

if Ccanvas.getContext) 1 


var ctx = canvas.getContext('2d'); 
ctx. fillStyle = 'rgb(255,0,0)'; 
ctx. fillRect(50,50,100,100) ; 
ctx. fillStyle = 'rgb(0,255,0)'; 
ctx.arc(250, 100, 
50, 0, 
Math. PI*2, 
false); 
ctx. fillQ; 
ctx.strokeStyle = 
"rgb(0,127,127)'; 
ctx.moveTo(50,50); 
ctx. LineTo(150,150) ; 
ctx. LineWidth = 5; 
ctx.strokeQ; 
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NOTE THAT THE STROKE YOU USE TO DRAW THE LINE AT THE 
END ALSO GETS APPLIED TO THE CIRCLE, EVEN THOUGH THE 
strokeStyle WAS SET AFTER THE ARC WAS CREATED. ~_ 


To ensure that the stroke for the line doesn’t apply to the circle, you need 
to explicitly put them on different paths with the beginPath© method: 


function draw(){ 

var canvas - document 
.getElementById('mycanvas'); 

if Ccanvas.getContext) 1 


ctx.fillStyle = 'rgb(255,0,0)'; 

ctx.fillRect(50,50,100,100); 

ctx.beginPath(); 

ctx.fillStyle = 'rgb(0,255,0)'; 

ctx.arc(250, 100, 50, 0, 
Math.PI*2, false); 

ctx.fillO; 

ctx.beginPath(); 

ctx.strokeStyle - 
"rgb(0,127,127)'; 

ctx.moveTo(50,50); 

ctx. LineTo(150,150) ; 

ctx. LineWidth = 5; 

ctx.strokeQ; 


Other shapes are just a matter of creating a path and then stroking or 
filling, or both. If you move the first two shapes over a little, there’s 
room to add a triangle. First draw the square and the circle again 


slightly further to the left: 


ctx.fillStyle = 'rgb(255,0,0)'; 

ctx. fillRect(5,50,100,100) ; 

ctx. beginPath() ; 

ctx.fillStyle = 'rgb(0,255,0)'; 
ctx.arc(165, 100, 50, 0, Math.PI*2, false); 
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ctx.fillO; 

ctx.beginPath(O; 

ctx.strokeStyle = 'rgb(0,127,127)'; 
ctx.moveTo(5, 50); 

ctx. LineTo(105,150); 

ctx. LineWidth = 5; 

ctx.stroke(); 


Put this code in your drawO function inside the if (canvas.getContext) 
{} block, replacing what you had previously, and then add the code for 
the triangle to it: 


ctx.beginPath(O; 
ctx.moveTo(265, 50); 

сіх.1іпеТо (315,150); 

сіх.1іпеТо (215,150); 

ctx. LineTo(265, 50); 

ctx.strokeStyle = 'rgb(51,51,51)'; 
ctx.fillStyle = 'rgb(204,204,204)'; 
ctx.stroke(); 

ctx.fillO; 


Notice that, even though the triangle starts 
and ends at the same point, there's a slight 
gap at the top. 


To prevent this, you need to close the path 
using the closePath method; the additional 
line required is highlighted bold: 


ctx. beginPath() ; 
ctx.moveTo(265, 50); 

сіх.1іпеТо (315,150); 

сіх.1іпеТо (215,150); 

ctx. LineTo(265, 50); 
ctx.cLosePathQ(); 

ctx.strokeStyle = 'rgb(51,51,51)'; 
ctx. fillStyle = 'rgb(204,204,204)'; 
ctx.stroke(); 

ctx.fillO; 
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You don’t have to restrict yourself to straight lines in paths. Instead of 
lineTo, you can use either of two types of curve: quadratic or Bézier. 


Let’s replace the first straight line with a 
Bézier curve. Instead of 


ctx.moveTo(5,50); 
ctx. LineTo(105,150); 


use the lines 


ctx.moveTo(5,50); 
ctx.bezierCurveTo(0,90, 120,70, 
105,150) 


The last pair of numbers is the end point. 
Preceding that are coordinates for the 
two control points. 


To simplify things the circle has been removed for now, but the sides of 
the triangle have also been made curvy, this time with a quadratic 
curve. À quadratic curve is similar, but only needs one control point. 
This is the code that drew the triangle, using quadraticCurve instead of 
lineTo. Here's the original triangle drawing code: 


ctx.moveTo(265,50) ; 
ctx.lineTo(315,150); 
ctx.lineTo(215,150); 
ctx.lineTo(265,50); 


Replace it with this: 


ctx.moveTo(265,50); 

ctx. quadraticCurveTo(315,50, 315,150); 
ctx.quadraticCurveTo(265,50, 215,150); 
ctx.quadraticCurveTo(215,0, 265,50); 
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In this version of the earlier diagram, the 
control points have been drawn along 
with lines connecting the control points 
to the start and end of the path; this 
should help you visualize what’s going 


on. The drawn lines are distorted from 
their direct path so they approach an 
imaginary line drawn between the start 
or end point and the control point. Check 
out the full listings for these examples in 
ch03/canvas-6.html and ch03/canvas-6- 
controls.html of the code download at 
www.manning.com/crowther/. 


AS YOU CAN SEE, IT'S EASY TO CREATE SOME INTERESTING SHAPES. BUT 
DRAWING CURVED LINES CAN BE HIT OR MISS, ESPECIALLY IF YOU'RE 
TRYING TO GET THE CURVE TO LINE UP WITH SOME OTHER DRAWN 
OBJECT. THE BEST APPROACH IS USUALLY TRIAL AND ERROR. 


\ 


Placing images SOMETIMES I LIKE TO 
. JUST $1T AND REFLECT 
One of the great features of «canvas» is that AMINOWINK WAT 
you can use it to manipulate images and YOU MEANINK 


achieve effects that are otherwise difficult to 
do with HTML and CSS. Here’s an example 
of what can be achieved: a reflection effect. 


The <canvas> element can’t download 
images —you can't give it a URL and expect 
it to fetch the image. Any image you want to 
use must already be available in your page 


content. There are various ways to do this, 
but the easiest 1s to include the element in 
the normal way. In this case, it's hidden: 


«div style="display: none;"> 


<img id="myimage" src="example.png" width="236" height="260"> 
</div> 
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The next few examples take the image at 


WHAT ARE WE DOINK? 


right and import it into the <canvas> 
TRYING TO 


i ; 1 SET A GOOD 1 HATE BEING 
import the image and place it on the «can- EXAMPLE. МАРЕ AN 


/ 
vas». EXAMPLE OFT. 


element. The simplest example is to 


You call drawImage with three parameters — 
WHAT ARE WE DOINK? 


the img element and the x and y coordinates: 
| TRYING TO 


SET A GOOD т HATE BEING 
EXAMPLE. МАРЕ AN 


EXAMPLE OF! 


function draw() { 
var canvas = document 
.getElementById('mycanvas'); 
if Ccanvas.getContext) 1 
var ctx = canvas.getContext('2d'); 
var img = 
document.getElementById('myimage'); 
ctx.drawImage(img, 10, 10); 
} 
H 


The example image is too large to fit into the 
«canvas» frame. You can easily fix this by 
defining a width and height for the placed 


image: 


if Ccanvas.getContext) { 
var ctx = canvas.getContext('2d'); 
var img = document 
.getElementById('myimage'); 
ctx.drawImage( 
img, 10, 10, 118, 130 
); 
H 


Now you're calling drawImage with five param- 
eters. The additional two are the width and 
height of the placed image. 
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You may not even want all of the original Е тыч 
image: X 


if C(canvas.getContext) { 
var ctx = canvas.getContext('2d'); 
var img - 
document.getElementById('myimage'); 
сіх. агамІтаде (іта, 
80, 100, 80, 160, 
10, 10, 160, 200); 


The previous example calls drawImage with nine parameters. Let's exam- 


ine them in more detail: 


THE FIRST PARAMETER IS STILL A 


REFERENCE TO THE img ELEMENT. 
drawImage (img, d 


THE X AND Y OF A POINT 
80, 100,4 -L——————- ІҢ SOURCE IMAGE. 
160,4 WIDTH AND HEIGHT 
806. 160; + ^ FORSECTION 
10, 10, OF SOURCE IMAGE. 
160, 200) ce T THE X AND Y POINT IN 
WIDTH AND HEIGHT FOR THE CANVAS FOR THE 
THE PLACED IMAGE PLACED IMAGE. 


Drawing text 
Let's now turn our attention to text. 
The «canvas» element has a limited 
ability to draw single lines of text on 
the context. The text-drawing meth- 
ods are more suitable for drawing 
labels and titles than for rendering 
large blocks of text. But the full 
graphical-processing ability of the 


«canvas» element can be applied to the text that's drawn, allowing for 


effects like this. 


THIS EXAMPLE TAKES ADVANTAGE OF THE TRANSFORMATION 

AND GRADIENT FILL FEATURES OF THE «canvas» ELEMENT. 
P d MORE DETAILS ABOUT THEM ARE IN THE SECTION "ADVANCED 

«canvas»: GRADIENTS, SHADOWS, AND ANIMAT ION." 
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Drawing text on the «canvas» is easy with the fillText method: 


function drawO t HAI! IZ IN YR ELEMENT WRITIN YR TXT 
var canvas - document 
.getElementById('mycanvas'); 
if Ccanvas.getContext) 1 
var ctx = canvas.getContext('2d'); 
ctx.fillText( 
'HAI! IZ IN YR ELEMENT 
WRITIN YR TXT', 
10,10); 
} 
H 


The filirext method has three required 
parameters: a string that is the text to be 
drawn, and x and y coordinates to deter- 
mine where it's to be drawn. 


The text is drawn in the current font, which is determined by setting 
the font property of the drawing context. The «canvas» element's font 
property behaves like the CSS font property, allowing size and font to 
be specified simultaneously: 


ctx.font = "10pt serif"; 


If you set the font size a little larger, you can see an alternative method 
for drawing text. As with rectangles, you can draw the fill and the 
stroke separately: 


function draw(){ 
ar canvas = document HAI! IZ IN YR ELEMENT WRITIN YR TXT 
Y - Ч HAI! IZ IN YR ELEMENT WRITIN YR TXT 


.getElementById('mycanvas'); 
if Ccanvas.getContext) 1 
var ctx = canvas.getContext('2d'); 
ctx.font - "12pt sans-serif"; 
ctx.fillText( 

'HAI! IZ IN YR ELEMENT 

WRITIN YR TXT', 

10,20); 
ctx.strokeText( 

'HAI! IZ IN YR ELEMENT 


www.it-ebooks.info 


86 


CHAPTER 3 Dynamic graphics 


WRITIN YR TXT', 
10,40); 
} 
} 


You can of course draw both fill and 
stroke on a single line of text if you want. 


Let’s see what happens if you increase the 
font size a bit more. Remember, the exam- 
ple <canvas> element is 320 pixels wide: 


ctx.font = "20pt sans-serif"; 
ctx.fillText( 
'HAI! IZ IN YR ELEMENT 
WRITIN YR TXT', 
10,80); 
ctx.strokeText( 
'HAI! IZ IN YR ELEMENT 
WRITIN YR TXT', 
10,110); 


As you can see, the text that doesn't fit 
flows off the edge of the element without 


wrapping. 


To work around this issue, you can use the 
fourth, optional, parameter to the fillText 
and strokeText methods. This parameter 
sets a maximum width for the text; if the 
text will be wider than the value passed, 
the browser makes the text fit either by 
narrowing the spacing between the letters 
or scaling down the font: 


ctx. fillText( 
"HAI! IZ IN YR ELEMENT 
WRITIN YR TXT', 
10,150, 300) ; 
ctx.strokeText( 
'HAI! IZ IN YR ELEMENT 
WRITIN YR TXT', 
10,180,300); 
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If you've added all three of these examples to the original listing, then 
you should have something similar to the ch03/canvas-text-4.html file 
in the code download. 


To further control the text position you can set the baseline of the text, 
which will adjust where it’s drawn in relation to the coordinates you 
provide. This is useful if you’re trying to position labels next to things 
on your canvas because it saves you having to work out exactly how 
tall the letters will be drawn. 


The default value is alphabetic, which means the bottom of an upper- 
case letter is placed at the y coordinate you provide in fillText. The 
following line sets the baseline to top, which means the top of an upper- 
case letter will be placed in line with the provided y coordinate: 


ctx.textBaseline - "top"; 


The following figure shows the previous example alongside a similar 
example, except with textBaseline set differently. 


textBaseline - "alphabetic"; textBaseline - "top"; 


-НА!! IZIN YR ELEMENT WRITIN-YR TXT, _ _ _ ~~ 


"HAT! TZIN YR ELEM ENT-WRITIN YR-TXT 
HAI! IZ IN YR ELEMENT WRITIN YR TXT 20PX HAI! IZ IN YR ELEMENT WRITIN YR тт 


-HAI! IZ IN YR ELEMENT. NEN | 
HAI! IZ IN YR ELEMENT 80РХ HAT IZ IN YR ELEMENT. 


ELEME 
HAL ZIN YR ELEMENTWRITINYRJXT. |. — - aae ah kiidan 
HAI IZ IN YR ELEMENT WRITIN YR TAT | 150% | WAR IZIN YR ELEMENT WRITIN YR TXT 
| 


i i HAI! IZ IN YR ELEMENT WRITIN YR TXT 


YOUR <canvas> ELEMENT. THE SIMPLE. 

Baseline are hanging, EXAMPLES WE'VE COVERED HERE MAY NOT 
| | . SEEM MLICH MORE. EXCITING THAN WHAT 
middle, ideographic, and CAN BE. ACHIEVED WITH PLAIN HTML AND 
БЕ CSS, BUT WE'VE BARELY SCRATCHED THE. 
ottom. SURFACE. IN THE NEXT SECTION, YOU'LL 


LEARN ABOLIT SOME MORE ADVANCED 
TECHNIQUES: GRADIENTS, DROP 
SHADOWS, AND TRANSFORMATIONS. 


Advanced <canvas>: gradients, shadows, and animation 


With the ability to draw a single-pixel shape on any part of the canvas, 
it’s possible for you to create any effect you want by implementing it 
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yourself in JavaScript. But the «canvas» element has some built-in 
shortcuts for particular effects. This section covers them. 


Creating gradiente 
The strokeStyle and filistyle methods you used in "Drawing shapes" 
to set the color of lines and shapes can also accept a gradient object 
where the color changes smoothly across a defined space. The «canvas» 
element can create two types of gradient: 
^ Linear ~The gradient follows a straight line. 
© Radial — The gradient is circular. 

In this section, you'll create one example of each. There are three steps 
to creating either gradient type in the <canvas> element: 

1 Create a gradient. 

2 Specify the color stops. 

3 Apply the gradient as a fill to a shape. 


Here’s a simple linear gradient in 
place of the solid fill from the earlier 


examples. 


You define the extents of the gradient 
with the createLinearGradient() met- 
hod. This method takes four parameters that define the upper-left and 
lower-right corners. The following diagram contains the code and 
indicates what the parameters refer to in the screenshot. 


var lineargradient = ctx.createLinearGradient( 
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Next you need to add color stops to the lineargradient you just created. 
A color stop is a point on the gradient at which you're setting a specific 
color. The browser interpolates between the color stops to create the 
gradient. The gradient object has an addColorStop() method for this. It 
accepts two parameters: a position and a color. The position is a 
number between 0 and 1, where 0 is the start of the gradient and 1 is 
the end. The code in the next diagram adds three color stops to your 
gradient. 


lineargradient 
.addColorStop( 
0, а igh тис аш ш foes 
"rgb(127,127,127)' 


lineargradient 
.addColorStop( 
0.5, - ----- 
'rgb(255,255,255)' 


lineargradient 
.addColorStop( 
1, г же эк жетш ме ы 
"rgb(127,127,127)' 


All that remains is to add the gradient to the context as a fillStyle and 
draw a shape. Here's the complete drawO function from ch03/canvas- 


9 html: 


function draw) { 

var canvas = document.getElementById('mycanvas'); 

if Ccanvas.getContext) { 
var ctx = canvas.getContext('2d'); 
var lineargradient = ctx.createLinearGradient(20, 20,220,220); 
lineargradient.addColorStop(0,'rgb(127,127,127)'); 
lineargradient.addColorStop(0.5,'rgb(255,255,255)'); 
lineargradient.addColorStop(1,'rgb(127,127,127)'); 
ctx.fillStyle = lineargradient; 
ctx.fillRect(20,20,200,200); 
ctx.strokeStyle = 'rgb(0,127,127)'; 
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ctx.moveTo(20, 20) ; 
ctx. LineTo(220, 220) ; 
ctx. LineWidth = 5; 
ctx.stroke(); 


} 


Now let’s create a radial gradient. 


For a radial gradient, you use the 
createRadialGradient() method. Six 
values are required: a center point 
and a radius for the inner bound, 
and a center point and a radius for 
the outer bound. This creates two 
circles between which the gradient | ~ 


is drawn. The two circles and their corresponding parameters are 
shown here. 


var radialgradient = ctx.createRadialGradient( 
120,120,50, aaie ort 
120,120,100 E 

2; * 


* 
te 
* 
О í 
D 
+ 
* 
* 
+ 
9 
% 
* 
fa 
. 
*. 
IM. 


Adding color stops is exactly the same as with the linear gradient, 
except that now those stops define circles between the two described in 
the createRadialGradient method: 


radialgradient.addColorStop(0, 'rgb(127,127,127)'); 
radialgradient.addColorStop(0.5, 'rgba(127,127,127,0.25)'); 
radialgradient.addColorStop(1, 'rgb(127,127,127)'); 
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Finally, the gradient is applied as a fillStyle as before: 


ctx.fillStyle = radialgradient; 
ctx. fillRect (20, 20,200,200); 


Check out the full listing in the file ch03/canvas-10.html in the code 


download. 


NOTE THAT YOU DEFINE BOTH LINEAR AND RADIAL GRADIENTS WITH 
COORDINATES RELATIVE TO THE ENTIRE CANVAS CONTEXT, NOT THE SHAPE 
— YOU WANT TO APPLY THEM TO. IF YOU WANT THE GRADIENT TO EXACTLY 
FILL THE SHAPE, YOU HAVE TO MAKE SURE YOU CHOOSE THE COORDINATES SO 
THAT THE GRADIENT APPEARS IN THE SHAPE YOU WANT TO FILL IT WITH. 


THE GRADIENT ISN'T CONFINED TO THE COORDINATES YOU SPECIFY—IT 
EXTENDS ACROSS THE CANVAS. THE FOLLOWING EXAMPLES SHOW A LINEAR 
GRADIENT CREATED WITH THREE DIFFERENT SETS OF COORDINATES. 


ә 


createLinearGradient( createlinearGradient( createLinearGradient( 
0,0,320,0 0,0,100,100 100,100,150,150 
2; 2; 2; 


Drawing drop shadows 


Drop shadows are an effect much loved by designers, and the 
«canvas» element has built-in support. To create a shadow, define the 
shadowOffsetX, shadowOffsetY, shadowBlur, and shadowColor properties on 
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the context object; the shadow will then be applied to any shape you 


draw. 


This example shows the earlier square 


with a line through it, now with a 


shadow in place: 


ctx. 
ctx. 
ctx. 
ctx. 


shadowOffsetX = 2; 
shadowOffsetY = 2; 
shadowBlur - 8; 
shadowColor - 


"rgba(0, 0, 0, 0.75)"; 


Using shadows, you can create effects 


such as cutout text: 


ctx. 
ctx. 
ctx. 
ctx. 


ctx. 
ctx. 
ctx. 
ctx. 


ctx. 
ctx. 


HAI! 
shadowOffsetX = 4; WRITIN YR TXT 
shadowOffsetY - 2; 
shadowBlur = 5; 
shadowColor - 


"rgba(0, 0, 0, 0.9)"; 

fillStyle = 'rgb(0,0,0)'; 
fillText('HAI!',170,50); 
fillStyle = 'rgb(255,255,255)'; 
fillText('IZ IN YR ELEMENT' 
,170,70); 

strokeStyle = 'rgb(0,0,0)'; 
strokeText('WRITIN YR TXT' 
,170,90); 


Transformations 


THE «canvas» 2D CONTEXT SUPPORTS A NUMBER OF TRANSFORMATIONS. THESE 
WORK ON THE CONTEXT ITSELF, SO YOU APPLY THE TRANSFORMATION AND 
THEN DRAW WHATEVER YOLI WANT TO APPEAR SLIBJECT TO THAT TRANSFORM. 
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Let’s start with a simple translate transformation. This moves the origin 
of the <canvas> element according to the x and y offsets you pass in as 


arguments: 


var img = document 
.getElementById('myimage'); 
ctx.translate(120,20); 
ctx.drawImage( 
img, 10, 10, 118, 130 


WHAT ARE WE DOINK> 


SET А 0000 І HATE BEING! 
EXAMPLE клр AN 


EE то 


J; 


If you compare this example with the similar one in “Placing images” 
without the transformation, you'll see you’ve basically moved the image 
down and to the right. Not particularly useful when you could have 
drawn the image there in the first place, but this technique would be 
useful if you wanted to move a collection of objects around while keep- 
ing their relative positions the same. 


Next, let's try rotation: 


var img = 
document.getElementById('myimage'); 
ctx.rotate(Math.PI/4); 
ctx.drawImage(img, 10, 10, 118, 130); 


The rotate() method takes a value in radians and rotates the drawing 
context by that angle. As with translate, the values you provide to the 
drawImage( method are now relative to the transformation. 
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You don’t want the image off the <canvas> like that, so let’s translate it 
and then rotate it: 


var img = 
document.getElementById('myimage'); 
ctx.translate(120,20); 
ctx.rotate(Math.PI/4); 
ctx.drawImage(img, 10, 10, 118, 130); 


TRANSLATE The transformations affect 


the whole context, so the 
ROTATE order in which you apply 
them is important. 


Let's try the opposite order: 


var img = 
document.getElementById('myimage'); 
ctx.rotate(Math.PI/4); 
ctx.translate(120,20); 
ctx.drawImage(img, 10, 10, 118, 130); 


fir 


As 
P^ 
fi 


че *. 
ROTATE m 
You can see that the rotate 


TRANSLATE now changes the direction 


the translate goes in. 


Animation 


ONE POTENTIAL USE OF THE «canvas» ELEMENT THAT HAS MANY DEVELOPERS EXCITED 

IS CREATING GAMES. ALREADY, MANY ARCADE CLASSICS OF THE 19805 AND 'ЧО$ HAVE 

BEEN RE-CREATED USING «canvas». IN ORDER TO CREATE GAMES, YOU NEED TO HAVE 
ANIMATION. LET’S LOOK AT HOW YOU CAN ANIMATE YOUR CANVAS DRAWINGS. NN 


Mon 21 Jun 2010 15:00:03 BST Mon 21 Jun 2010 15:00:24 BST Mon 21 Jun 2010 15:00:47 BST 
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THE PREVIOUS EXAMPLE IS ONE OF THE WORLD'S LEAST EXCITING 
ANIMATIONS IMPLEMENTED WITH THE <canvas> ELEMENT. PAC-MAN IT 
ISN'T, BUT THIS SIMPLE DEMO IS ENOUGH TO DEMONSTRATE 

THE GENERAL PRINCIPLES, HERE'S THE CODE USED TO GENERATE IT: 


МА THE init() FUNCTION WILL 
BE CALLED ON PAGE LOAD. 


теп tO £ g SET AN INTERVAL TO CALL THE 


DRAW THE агам() ; 
INITIAL STATE a window. setInterval (draw, 1000) ; аа EVERTTEIOD 
TO START. } ^ 
function drawQ) { 
var now = new Date(); 
document.getElementById('timestamp').innerHTML 
= now.toLocaleString() ; 
var canvas = document.getElementById('mycanvas'); 
if (canvas.getContext) { AS A SHORTCUT, THE 
EXPLICITLY CLEAR THE var ctx = canvas.getContext('2d'); STATE OF THE 
CANVAS. THE PREVIOUS __” ctx.clearRect(0,0, 320,240); ANIMATION IS GIVEN 
STEP OF THE DRAWING ctx. fillStyle = 'rgb(255,0,0)'; BY THE CURRENT TIME. 
WON'T BE REMOVED ctx. fillRect(now.getSeconds() * 4,50,100,100); 
AUTOMATICALLY. ctx. beginPath() ; 


ctx.strokeStyle = 'rgb(0,127,127)'; 
ctx.moveTo(now.getSeconds() * 4,50); 
ctx.lineTo(now.getSeconds() * 4 + 100,150); 


ctx. lineWidth = 5; 
ctx.strokeQ; YOU NEED TO RESET THE PATH SO THE 


n PREVIOUS PATH ISN'T REDRAWN EVERY 
ITERATION. 


Here's what happens if you forget to explicitly start a new path. 


Sat 11 Dec 2010 16:18:03 GMT Sat 11 Dec 2010 16:18:23 GMT Sat 11 Dec 2010 16:18:42 GMT 


If you forget to close any paths you have open, they'll be redrawn as 
you iterate through your animation steps along with any additions to 
the path. Clearing the pixels on the context doesn't reset the path. 


The «canvas» element allows precise, pixel-level control over what is dis- 
played and is already considered a rival to Flash in the browser game 
marketplace because it works on iPhones and iPads. Experimental 
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versions of <canvas> have full 3D support, and several first-person shoot- 
ers from the 1990s have already been ported to allow play in a browser. 


USER FRIENDLY by Illiad 
ININET IES GAMES ON THE WEB, NEW 
OPPORTUNIT IES FOR OLD GAMERS 


ROLND START ING IN 3.2.1. 


YOU JUST GOT OWNED BY 
PEOPLE WHO WERE NOT EVEN 


SHOULD BE PLENTY OF 
NOOBS OUT THERE 


hittp:/Avww.userfriendly.org! 


Copyright (c) 2000 Шад 


NOW THAT YOU'VE LEARNED ABOUT THE «canvas» ELEMENT, IT’S TIME TO LOOK 
^ АТ THE SECOND TECHNOLOGY AVAILABLE IN HTMLS FOR DRAWING GRAPHICS: SVG. 


Getting started with SVG 


Browser support quick check: 
SVG in HTML 


Scalable Vector Graphics (SVG) is an XML language 
for displaying vector graphics. It has long been possible 

е 7.0 to embed SVG within XML-based XHTML documents; 
but because HTML5 leads you back to HTML-based 

е 4.0 markup, it adds the useful feature that SVG can be 
embedded directly. 

е + 

О 11.6 

e 


Let's create a simple SVG drawing. 
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You're probably thinking it looks familiar, and you're right. Many of 
the things that can be achieved with <canvas> can also be easily 
achieved with SVG. You'll learn more about the relative strengths and 
weaknesses of each in the section “SVG vs. <canvas>,” but for now all 
you need to understand is that <canvas> and SVG are based on different 
conceptual models of how to create images. <canvas> is what program- 
mers call imperative; you provide a detailed list of operations to be per- 
formed that will produce a particular result. SVG is declarative; you 
provide a description of the final result and let the browser get on with 
it. Where <canvas> requires JavaScript, SVG requires markup, much 
like HTML, and it can be included directly in НТМІ5: 


«IDOCTYPE html» 
«html» 
«head» 
<title>SVG example 2</title> 
</head> 
<body> 
<svg id="mysvg" viewBox="0 0 320 240" 
style-"outline: 1px solid #999; width: 320px; height: 
240px; "> 
<rect x="50" y="50" width="100" height="100" 
style="fill: rgb(255,0,0)"> 
</rect> 
«line x1="50" у1="50" x2="150" y2="150" 
style="stroke: rgb(0,127,127); stroke-width: 5;"> 
</line> 
</svg> 
</body> 
</html> 


There are several interesting things to be seen in this simple example. 
First, note that the size of the element on the page is determined by 
CSS in the style attribute, but you also define a viewBox with the same 
values. Because SVG is a vector format, pixels aren't as significant; you 
can use viewBox to define a mapping between the physical dimensions of 
the element, defined in CSS, and the logical coordinates of everything 
displayed within. 
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Look what happens if you use these val- 

ues: viewBox="0 0 640 480". It’s the same Eu 
SVG graphic as before, but rendered into 

a larger viewport. 


Applying styles to SVG 


The previous examples used an inline 

style to apply colors and stroke thick- 

nesses. Those properties can also be applied directly to the elements in 
question, like this: 


<rect x="50" y="50" width="100" height="100" 
fill="rgb(255,0,0)"></rect> 

«line x1="50" у1="50" х2="150" y2="150" 
stroke-"rgb(0,127,127)" stroke-width-"5"»«/line» 


But you can alternatively leave off the style and inline attributes and 
use this in your CSS file, and achieve the same results: 


rect { fill: rgb(255,0,0); } 
line { stroke: rgb(0,127,127); stroke-width: 5; } 


It looks much like any other CSS, 

albeit with some unusual properties. 

As with regular HTML, CSS can I В d] 
make life much easier if you have a 

lot of similar objects because you can 

use a class to apply a set of styles to Е В 
several elements. 

In this example there are three green 

squares (upper left, upper right, 


lower left) and three blue squares. Rather than specify inline styles on 
each one, you can declare their commonality with the class attribute: 


<svg id="mysvg" viewBox="0 0 320 240"> 
«rect x="50" y="50" width="50" height="50" class="earth"></rect> 
<rect x="150" y="50" width="50" height="50" class="water"></rect> 
<rect x="250" y="50" width="50" height="50" class="earth"></rect> 
«rect x="50" yz"150" width="50" height="50" class="earth"></rect> 
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<rect x="150" y="150" width="50" height="50" class="water"></rect> 
<rect x="250" y="150" width="50" height="50" class="water"></rect> 
</svg> 


Then you style the common elements with CSS in the <head> of your 
document in the usual way: 


«style» 
rect.earth { fill: rgb(0,127,0); } 
rect.water { fill: rgb(0,0,255); } 
</style> 


Drawing common shapes 
Let's carry on and re-create the rest 
of the «canvas» example shapes in 
SVG. In addition to the rectangle 
and line elements you've seen 


already, SVG has elements for circles 
and arbitrary polygons. 


For a circle, you need to provide the 

x and y coordinates of the center and 

the radius as appropriate attributes. 

A polygon is slightly more complex; it has an attribute points that you 
use to supply a space-separated list of X,y coordinates. This code, when 
placed inside the <svg> element from the listing in the introduction, gen- 
erates the previous image: 


«rect х="5" у="50" width="100" height-" 100" 
style-"fill: rgb(255,0,0);"></rect> 
«line х1="5" у1="50" х2="105" y2="150" 
style-"stroke: rgb(0,127,127); stroke-width: 5; "></1іпе> 
«circle сх="165" су="100" r="50" 
style-"fill: rgb(0,255,0);" »«/circle» 
«polygon points="265,50 315,150 215,150" 
style="stroke: rgb(51,51,51); fill: rgb(204,204, 204); 
stroke-width: 5;"></polygon> 


With the polygon element you don’t have to provide the starting point a 
second time; it assumes the shape is closed, and the path drawn returns 
to the first point. If you want to draw an open shape, you can use the 
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<polyline> element instead; it uses an identical points attribute but 
doesn’t close the path around the shape. 


«polygon «polyline 
points="265,50 315,150 215,150" points="265,50 315,150 215,150" 
style="stroke: rgb(51,51,51); style-"stroke: rgb(51,51,51); 
fill: rgb(204,204,204); fill: rgb(204,204,204); 
stroke-width: 5;"» stroke-width: 5;"» 
</polygon> «/polyline» 


YOU'VE SEEN SEVERAL ELEMENTS 
MAKE. DIFFERENT SHAPES IN A SINGLE. 
SVG DRAWING, BUT THERE'S ALSO A 
WAY TO DRAW SEVERAL DIFFERENT 
SHAPES ТМ A SINGLE SVG ELEMENT. 
А? FOR THIS YOU USE THE <path> 
\ ELEMENT. LET'S LOOK AT AN EXAMPLE. 


ALTHOUGH YOU CAN SEE THREE SHAPES IN THE PREVIOUS IMAGE, THEY'RE A 
SINGLE SVG ELEMENT: A PATH. THE «path» ELEMENT IN SVG IS VERY 
РА POWERFUL. HERE'S THE CODE: 


THE <path> ELEMENT WORKS AS IF IT WAS 


AN IMAGINARY PEN. YOU THEN LISE THE 
2? , ATTRIBUTE TO PASS A SERIES OF COMMANDS 
«path d-"M5,50 TO THE PEN TO TELL IT WHAT TO DRAW. 
MOVE TO COORDS 550 10,100 1100,0 10,-100 1-100,0 DRAW A LINE TO 1000 
RELATIVE TO THE CURRENT 
UPPERCASE LETTERS MEAN ———» M215,100 POSITION. 
ABSOLLITE COORDINATES. 


450,50 0 1 1 -100,0 50,50 0 1 1 100,0 
LOWERCASE LETTERS MEAN 


COORDINATES RELATIVE M265,50 Ne 
TO TE CURRENT PEN S DRAW TWO ARCS TO MAKE A 


CIRCLE. 
POSITION. 150,100 1-100,0 150,-100 


2" 
style-"stroke: rgb(51,51,51); 
fill: rgb(204,204,204); 
stroke-width: 5;"/» 


CLOSE THE PATH. 
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It seems like a path can do anything, so why bother to use anything 
else? The <path> element is difficult to understand and manipulate 
because of its reliance on a single attribute value. In addition, any style 
will apply to all shapes on the same path, so all your shapes will have 
the same border and color. Of course, nothing is stopping you from 
using more than one path with a different style applied to each. 


Images, text, and embedded content 
Images are easy to embed within your SVG drawing. The syntax is sim- 
ilar to that of HTML, and the only additional information you need to 
provide over and above the <image> element are the coordinates of the 
upper-left corner: 


<image x="10" y="10" 


width="236" height="260" WHAT ARE WE DOINK? 
xlink:hrefz"example.png"» TRYING TO 
; SET А GOOD 1 HATE BEING 
</image> EXAMPLE. МАРЕ AN 


E 


You use an xlink:href to link to the image. The xlink is a namespace, a 
legacy of SVG's XML heritage that leaks through to HTML5; more on 
that shortly. Text is handled a little differently in SVG compared to 
HTML. In HTML, any text within the body is rendered to the screen — 
no special wrapping is required. In SVG, text has to be explicitly 


A EXAMPLE OF ! 
7 


wrapped within a containing element: 


<text x="10" y="20"> HAI! IZ IN YR ELEMENT WRITIN YR | 
HAI! IZ IN YR ELEMENT WRITIN 
HAI CAN HAS STDIO? VISIBLE "HAI 
YR TXT 
</text> 
<text x="10" y="60"> 
HAI 


CAN HAS STDIO? 
VISIBLE "HAI WORLD!" 
KTHXBYE 

</text> 
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The previous example highlights another problem: text that won’t fit in 
the view isn’t automatically wrapped. Line breaks also have to be 


explicitly coded using the <tspan> element: 


«text x="10" y="20"> НАП IZ IN YR ELEMENT WRITIN YR 
HAI! IZ IN YR ELEMENT WRITIN HAI 
YR TXT CAN HAS STDIO? 
VISIBLE "HAI WORLD!" 
</text> KTHXBYE 


<text x="10" y="60"> 
<tspan x="10">HAI</tspan> 
<tspan x="10" dy="20"> 
CAN HAS STDIO? 
</tspan> 
<tspan x="10" dy="20"> 
VISIBLE "HAI WORLD!" 


</tspan> 
<tspan x="10" dy="20"> 
KTHXBYE 
</tspan> 
</text> 


A nice effect you can achieve on short runs of text is to make the text 
follow a path. If you extract the circle part of the path from the earlier 
example, you can spread the text along it with the <textpath> element: 


<defs> 
«path id="myTextPath" 
d="M215 , 100 „ањ, 
050,50 011 2 4 
-100,0 50,50 0 11 % E 
100,0" MT E 
«/path» 
«/defs» 
«text» 
«textPath 


xLink:href="#myTextPath"> 
НАТ! IZ IN YR ELEMENT 
WRITIN YR TXT 
</textPath> 
</text> 
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The path is created in the <defs> element, 
and then you link to it using an xlink:href 
like you used for the image earlier. The link 
works like other web content, so you could 
refer to the path in a separate file if you 
wanted to. 


You can also apply gradient fills and any 


IN y 
number of other SVG effects to the text. е. 
We'll cover this in detail in the next section, 2 4 
but this example shows a gradient from 2, & 
. . Ф. N 
transparent light green to solid dark green ә WX NI d 


applied as a fill to a slightly larger version 
of the circular text. See ch03/svg-10.html 
for the full code for this example. 


CUMBERSOME IN SVG. THE TEXT ELEMENTS ARE ONLY REALLY USEFUL FOR 
LABELS AND SHORT DESCRIPTIONS. BUT SVG OFFERS AN ALTERNATIVE-YOU 


AS WITH THE <canvas> ELEMENT, LARGE BLOCKS OF TEXT ARE SOMEWHAT 
кеа 
CAN EMBED HTML CONTENT INSIDE ANY ELEMENT WITH <foreignObject>. Z 


<rect x="5" y="5" width="10" height="160" 
style-"stroke-width: 5; stroke: rgb(102,102,102); fill: none;"> 
«/rect» 
«foreignObject x="10" y="10" width="100" height="150"> 
<body> 
<p> 
<strong>HAI! </strong><br/> 
IZ IN YR ELEMENT 
<em>WRAPPIN</em> YR TXT 
</p> 
</body> 
«/foreignObject» 


Everything inside the <foreignObject> element is HTML; and unlike the 
SVG «text» element, HTML can cope with wrapping text just fine by 
itself. It's important to remember that the browser isn't rendering the 
contents of «foreignObject» as if they were HTML; the content is HTML 
and can be interacted with in the normal way. 
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A second example will make this clearer. 


oppna na | pu 


Ө 


On the right is a screenshot of the entire browser window; оп the left 
it’s zoomed in to just the content of the foreignobject element. The 
Duck Duck Go home page has been scaled down and rendered upside 
down inside the browser, but it’s still possible to type search terms and 
see results returned (even if they’re too small to read!). This was 
achieved by wrapping an HTML document inside a <foreignObject> 
element in SVG and then applying some transforms: 


<svg id="mysvg" viewBox="0 0 800 600"> 
«g transform="rotate(180) translate(-800,-600)"» 
«foreignObject х="10" y="10" width="800" height="600"> 
<body> 
<iframe src="http://duckduckgo.com/" 
style="width: 780px; height: 580px"> 


</iframe> 
</body> 
«/foreignObject» 
«/g» 
«/svg» 


This example shows a few things you've seen before. The viewBox is set 
to 800 x 600 pixels, even though the element is 320 x 240 pixels; this 
takes care of the scaling. And an <iframe> element is used inside the 
<foreignObject> to fetch the Duck Duck Go page. New in this example 
are the <g> element for grouping SVG content and the transform attri- 
bute, both of which we'll look at in the next section. 
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USER FRIENDLY by Illiad 
-SO I MODIFIED THE PROXY 
SERVER TO ADD AN SVG WRAPPER 
TO ALL HIS WEB PAGES 


YOU NEED TO F1X MY MACHINE, 
ALL THE WEB 15 UPSIDE DOWN NO. 1 DON'T LIKE 
THIS “AUSTRALIAN 
INTERNET* TAKE ME 


riendly.org/ 


userfi 
Sz 
F 
48 
| 
ў 


= DIFFERENT ANGLE 


о. 
= 
= 


Copyright (c) 2000 Шад 


NOTE THAT IN REAL LIFE, IT'S POSSIBLE FOR WEBSITES TO BLOCK 
EMBEDDING LIKE THIS BY SENDING INFORMATION TO THE BROWSER TO 
TURN ON EXTRA SECURITY FEATURES. THIS IS DONE TO PROTECT USERS 

FROM MORE NEFARIOUS VERSIONS OF MIKE'S TRICK ON STEF. 


Transforms, gradients, patterns, and declarative animation 
SVG is a huge topic, worthy of a book by itself, and we've barely 


scratched the surface so far. In this section, we'll finish by taking a 
quick look at some of the more advanced features. 


WHEN YOU WANT TO APPLY AN EFFECT TO A COLLECTION OF ELEMENTS, YOU USE 
THE GROUPING ELEMENT, <g>. GROUPING IS ALSO USEFUL FOR OTHER PURPOSES, 
FOR EXAMPLE, IF YOU WANT TO MOVE SEVERAL ELEMENTS AT THE SAME TIME. 


You saw a transform in action in the last example of the previous sec- 
tion. Here it is again: 


«g transform="rotate(180) translate(-800,-600)"» 


The transform attribute accepts a space-separated list of commands that 
are applied in order. The element is rotated 180 degrees and then, 
because the rotation point by default is the upper-left corner, it's 
moved back into view with the translate transform. You could instead 
pass a set of coordinates to the rotate transform and achieve the same 
result in a single step: 


«g transform="rotate(180, 400, 300) "> 
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In addition to rotate and translate, there are several other transforma- 


tion commands: 


© scale() — You've seen examples of scaling already. Earlier examples 
scaled the entire viewBox. This command allows you to control it for 
specific elements. 

^ matrixO — This is a powerful transformation that allows you to emu- 
late all the others in combination, if you understand the mathematics 
of matrix transformations. If, like me, you missed that particular part 


of the curriculum, it's easiest to stick to the other transformations. 


^ skewXO and skewY O — See the following table. 


No transform skewX(45) 


Y 


No transform 


Y 


skewY(33) 
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THE TRANSFORMATION FUNCTIONS FOR SVG AND «canvas» LOOK SIMILAR, 
AND THEY ARE. THE MAIN DIFFERENCE FROM A DEVELOPER PERSPECTIVE IS 
THAT SVG TRANSFORMATIONS EXPECT ANGLES IN DEGREES, WHEREAS 
«canvas» TRANSFORMAT IONS EXPECT ANGLES IN RADIANS. 


GRADIENTS 


As with «canvas», an SVG gradient is defined in a separate object. You 
can define this object at the top of your SVG file or element inside a 
«defs» element, and then reference the gradient object through CSS: 


«svg viewBox="0 0 320 240"> 


«defs» 
«linearGradient id="grad1" pP 
x1="0%" y1="0%" x2="100%" 
y2="100%"> 


<stop offset="0%" style=" 
stop-color:rgb(127,127,127); 
stop-opacity:1"/» 

«stop offset="50%" style=" A 
stop-color:rgb(255,255,255); 
stop-opacity:1"/» 

«stop offset="100%" style=" 
stop-color:rgb(127,127,127); 
stop-opacity:1"/» 

«/linearGradient» 
«/defs» 
«rect x="20" y="20" 

width="200" height="200" 

style-"fill: url(grad1)"» 

«/rect» 
«/svg» 


The «rect» element references the gradi gradient through its fill style. 
See the full listing in the ch03/svg-15.html file in the code download. 


PATTERNS AND MASKS 


You might expect that you could create a repeating background by 
specifying something like fill="url(example.png)", but that won't work. 
You have to add the image to a «patterns: 
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<defs> 
<pattern id="img1" 
patternUnits="userSpaceOnUse" 
width="315" height="212"> 
«image xlink:href="uf009705. png" 
x="0" y="0" 
width="305" height="212"> 
</pattern> 
</defs> 


Then use the pattern to fill: 


<path d="M5,50 
10,100 1100,0 10,-100 1-100,0 
M215 ,100 
a50,50 0 1 1 -100, 
0 50,50 © 1 1 100,0 
M265,50 
150,100 1-100,0 150,-100 


2 
fill="url С#1т91) "> 


The full listing is in ch03/svg-16.html. 


You can apply the same pattern toa 
«text» element, although you should 


pick your image carefully to ensure (1 T М x. 

that things are readable: „Йй TA 
= yI. Б ау E , 

«text x="0" y="120" f». { E с x e » 


font—family="sans—serif" 

font-size-" 80" 

font-weight-"bold" 

fill="url(#img1)" > 
<tspan>HTML5</tspan> 
«tspan x="0" y="180" 

font-size="70"> 
ROCKS! 
</tspan> 
</text> 


This code is taken from the file ch03/ 
svg-17.html. 


www.it-ebooks.info 


Getting started with SVG 109 


SVG is a large specification, and there’s more than one way to achieve 
this same effect. Instead of applying the image as a background to the 
text, the text can be used to clip the image. To create a mask, the main 
change is that the text should be filled with white: 


«mask id="imgl" clipPathUnits-"userSpaceOnUse" width="320" 
height="200"> 
«text x="0" y="120" font—family="sans—serif" 
font-size="80" font-weight="bold" fill="white"> 


<tspan>HTML5</tspan> 
«tspan x="0" yz"180" font-size="70">ROCKS!</tspan> 
</text> 


</mask> 


Then attach the mask to the <image> 
element with the mask attribute: 


«image xlink:href="uf009705. рпа" м Ы 1 Е: 
mask="url(#img1)" WE = р 
x-"-10" у="—5" f» ra ў М. а. < 
width="340" height="220" /> 

The image is positioned to approxi- 

mate the previous example; see the 


code in ch03/svg-17-clippath. html. 


QUICK LOOK AT THE DECLARATIVE ANIMATION CAPABILITIES IT 
OFFERS. IN THE FOLLOWING SCREENSHOTS, THE TEXT-PATTERN 


WE'LL FINISH OUR TOUR OF THE ADVANCED FEATURES OF SVG WITH A 
EXAMPLE HAS BEEN ANIMATED TO MOVE DOWN AND THEN BACK ИР AGAIN. x б, 
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[ С 
ат HTMLE 


rai Б Qiu xz: 


Wed 22 Dec 2010 14:45:46 GMT Wed 22 Dec 2010 14:45:50 GMT Wed 22 Dec 2010 14:45:55 GMT 


Let's look in detail at how this is done in the listing from ch03/svg- 
18.html. 


UNLIKE THE «canvas» ELEMENT YOU DON'T NEED TO RESORT TO 
JAVASCRIPT TO GET ANIMATION. ANIMATIONS CAN BE DESCRIBED USING 


Gs) THE SAME XML MARKUP USED TO DESCRIBE THE SHAPES THEMSELVES. 
е 

THIS IS THE SAME «text» 
O2 ELEMENT USED IN THE 

PREVIOUS EXAMPLE. 


«text x="0" y="120" font-family="sans-serif" font-size-"80" 
font-weight-"bold" fill="url(#img1)" > 
<tspan>HTML5</tspan> 
«tspan х="0" y="180" font-size="70">ROCKS!</tspan> 
<animateTransform fill="freeze" 


TO ANIMATE, ADD AN uL YOU'LL ANIMATE THE 
EXTRA CHILD NODE. THE attributeName-"transform" type-"translate" translate PROPERTY 
ATTRIBUTES DETERMINE i 
THE ANIMATION. values="0,0;0,220;0,0" 
A SEMICOLON-SEPARATED LIST 
begin="0s" dur="10s" OF VALUES FOR translate. 
ONCE COMPLETE, REPEAT 
INDEFINITELY. ——__, repeatCount="indefinite"> 
</text> 
THE ANIMATION WILL BEGIN 
IMMEDIATELY AND RUN FOR A 
DURATION OF 10 SECONDS. 


NOTE THAT, UNLIKE WITH ANIMATIONS ON «canvas», YOU DON'T HAVE TO WRITE 
PROGRAMS TO REDRAW THE SCENE EVERY SECOND. YOU JUST DECLARE WHAT THE 

— ANIMATION SHOULD BE AND LET THE BROWSER GET ON WITH IT. THIS 15 WHY SVG 
ANIMATION WAS EARLIER REFERRED TO AS DECLARATIVE ANIMATION. 
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SVG animations aren’t limited to simple attribute manipulations. Just 
as you were able to make text follow a path, it’s also possible to make 
an animation follow a path. Here’s an animation around a triangle. 


HTMLS 
ROCKS! HTML! ITMLE 


Z9 ҮШҮ | 14 da м E's 


Wed 22 Dec 2010 17:52:22 GMT Wed 22 Dec 2010 17:52:25 we E Wed 22 Dec 2010 17:52:29 GMT 


You can see the changes for yourself in ch03/svg-19.html. Here are the 
key points: 


THE ABILITY TO ANIMATE ALONG A PATH ALLOWS YOU TO DEFINE 
ANIMATIONS OF ALMOST UNLIMITED COMPLEXITY. 


a 
C2 


«text x="0" y="120" font-family-"sans-serif" font-size="80" 


font-weight-"bold" fi11="url(#img1)" 
THE SAME <text> аа ОЕ 


ELEMENT ONCE <tspan>HTML5</tspan> 
MORE. «tspan x="0" y="180" font-size="70">ROCKS!</tspan> 
<animateMotion THE PATH DRAWS THREE 
THIS TIME THE "d LINES (A TRIANGLE) 
ЕЕЕ pole path-"M0,0 150,100 1-100,0 150,-100 z" ^AND CLOSES. 


dur="10s" repeatCount="indefinite"> 


</text> 
THE PATH IS RELATIVE TO 


THE CURRENT POSITION 
OF THE ELEMENT. THE ANIMATION WILL LAST 10 SECONDS 
AND REPEAT INDEFINITELY. 
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SVG vs. <canvas> 


I AM LIKINK 
THE «canvas» ELEMENT. 
CLEAN AND SIMPLE API 
MAKINK HAPPY 
DEVELOPER. 


SVG HAS AN APL TOO, BUT IT'S 
THROUGH THE BROWSER DOM 
WHICH DOUBLES AS A PERSISTENT 
OBJECT MODEL. 


| 


WITH <canvas>, YOU HAVE TO 
MANAGE YOUR OWN OBJECTS. 
AND IT HAS NO INTERNAL 
STRUCTURE, AS YOU CAN SEE BY 
COMPARING THE FOLLOWING 
TWO SCREENSHOTS OF DOM 
INSPECTOR. 


Canvas example 2 - DOM Inspector | 


File Edit Search View Help 


(ci dà | file:///home/robert/documents/writing/canvas-2.html 


v Document- DOM Nodes 


v v Object - DOM Node 


| nodeName id ur | Local Name: canvas 
| Marra | Namespace URI: http://www.w3.org/1$ 
| m | : 
т | Node Туре: Element 
> HEAD || nodeName nodeValue m 
#text || height 240 m 
"BODY || width 320 
| #text || id mycanvas 
CANVAS  тусапуаз | 
| #text | 
#text | 


SVG example 2 "DOM Inspector 


File Edit Search View Help 


#4 |file;//home/robert/documents/writing/svg-2.html | Inspect 
У Document - DOM Nodes v v Object- JavaScript Object 
| nodeName id в | Property Value m 
|v #document ‚ addEventList... function addEve... |^ 
html animationsP... function animati... 
"HTML appendChild function append... 
P HEAD b attributes [object NamedN... 
#text baseURI "file:///home/rob... 
"BODY checkEnclos... function checkE... 
#text | checkinterse... function checkin... 
childElemen... 2 
#text b-childNodes [object NodeList] 
rect D children [object HTMLCol... 
#text b classList 
line b. className [object SVGAni... 
#text clientHeight 0 
#text clientLeft 0 Y 
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IS TRUE. BLIT BROWSER DOM WELL. THERE ARE ISSUES 
IS BEINK TOO HEAVYWEIGHT. IS GOOD ONCE YOU HIT A CERTAIN THRESHOLD IN 
THAT I AM CHOOSING OWN OBJECT THE NUMBER OF OBJECTS, BUT SVG HAS 
MODEL IN <canvas> WHEN MAPPINK OTHER ADVANTAGES. 
SEVERAL THOUSANDS OF MINIONS. 


THE NEXT TWO SCREENSHOTS 
SHOW THE EFFECT OF ZOOMING IN 
EIGHT TIMES ON A <canvas> 
ELEMENT COMPARED TO AN SVG 
ELEMENT. 


4l: A 


TRUE, BUT WHY 


YA. NATURAL VECTORS IS BEINK NICE 
FEATURE. BUT BEINK PRACTICAL, CAN 
JUST BE RESIZINK AND REDRAWINK 


MAKE EXTRA WORK 
<canvas> ELEMENT TO BE MATCHINK FOR YOURSELF? 
PAGE DIMENSIONS. | 
SVG HAS OTHER ADVANTAGES: FOR 
Г. INSTANCE, IT'S EASIER TO INTEGRATE IT 


WITH OTHER WEB CONTENT. ALSO, THE 
DECLARATIVE STYLE OF SVG MAY BE MORE 
COMFORTABLE FOR WEB AUTHORS WHOSE 
STRENGTHS LIE IN HTML AND CSS. 
HAVE BEEN DISCUSSINK THIS BEFORE. AM 
NOT BELIEVINK MARKUP MONKEYS IS BEINK Ми) 
THE SAME THINK AS REAL DEVELOPERS. 


NOT ALL WEB AUTHORS NEED TO BE HARD-CORE 
DEVELOPERS. THERE ARE OTHER BENEFITS TO THE 
OBJECT MODEL AND DECLARATIVE MARKUP—SVG 
WILL BE MLICH EASTER TO MAKE ACCESSIBLE. 


IS TRUE, BUT AGAIN BEINK PRACTICAL, NO 
BROWSER IS SUPPORTINK ACCESSIBILITY 
FEATURES IN SVG YET. 


/ || S. 
SOUNDS LIKE A GOOD TIME TO LOOK AT 
BROWSER SUPPORT FOR «canvas» AND SVG. 
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Browser support 


Both <canvas> and SVG have wide support in current browsers, with 
prospects for even better support in the respective next releases. 
<canvas> support tends to be all or nothing, but the situation with SVG 


is a lot more complex. 


The SVG spec itself is about as complex as the HTML one, and no 
browser fully supports it, so the following table lists the percentage of 
the W3C SVG test suite that each browser passes. Figures aren't avail- 
able for all browser versions, so the results for the most recent test in 
each browser are shown (thanks to www.codedread.com/svg- 
support.php for the figures). 


o e 6 Oe 

12 14 4 6 8 |9 |10 | 11.5 12 5 5.1 
«canvas» ° ° ° ° ° ° ° ° ° ° 
<canvas> text ° ° ° ° ° ° ° ° ° ° 
SVG score 89.23% 82.30% - | 59.64% 95.44% 82.48% 
SVG as image ° ° ° ° ° ° ° ° ° ° 
SVG in CSS ° ° ° ° ° ° ° ° ° ° 
SVG as object ° ° ° ° ° ° ° ° ° ° 
SVG in XHTML ° ° ° ° ° ° ° ° ° ° 
SVG in HTML ° ° ° ° ° ° ° ° 


Кеу: 

e Complete or nearly complete support 

o Incomplete or alternative support 
Little or no support 


Supporting «canvas» in older versions of IE with explorercanvas 
Internet Explorer was the only major browser that had no support for 
the «canvas» element, although support has been added in IE9. But 
older versions of IE have support for Vector Markup Language 
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(VML). VML is a predecessor of SVG, and you've already seen that 
SVG and <canvas> can do a lot of similar things. The explorercanvas 
library implements <canvas> in IE8 and earlier using VML. Activating 
explorercanvas is as simple as including a «script» element in the head 
of your HTML document: 


«head» 
«I--[if IE lte 8]»«script src="excanvas.js"></script><! [endif]-—» 
</head> 


If you add that to any of the examples Up ravertes а convas exemple 6 
you've seen in this chapter, you 

should see them rendering in IE8 as 

the screenshot at right. 


SVG in XML vs. SVG in HTML 


I mentioned earlier that SVG support 

isn't as clear-cut as «canvas» support. 

This isn't just because the SVG speci- 

fication is more complex but also 

because there are more ways to use SVG from within a web page. This 
is largely because SVG was originally envisioned as one of a family of 
XML-based languages that would be used for web content. 


In nearly all the major browsers, it has long been possible to embed 
SVG content in the XML version of HTML/XHTML. Unfortunately, 
there has been one major obstacle to this happening. 


FULLY COMPLIANT XHTML SHOULD BE DELIVERED FROM THE SERVER AS XML 
CONTENT. THE SERVER TELLS THE BROWSER THE CONTENT TYPE OF THE FILE 
IN THE HEADER OF THE HTTP RESPONSE. UNFORTUNATELY, IF YOU TRY TO 
SEND AN XML WEB PAGE TO A VERSION OF INTERNET EXPLORER EARLIER "NNS 
THAN Я, IT REFUSES TO PARSE THE PAGE. BECAUSE DEPLOYING SVG IN XHTML 
REQUIRES BREAKING IE, FEW PEOPLE HAVE CONSIDERED IT PRACTICAL. 


Embedding SVG as an image 
SVG can be used in the <img> element in the same way as any other 
image format: 


«img src="Svg-2.svg"> 
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When used this way, SVG still has the advantage of being scalable; you 
can set it to take up half the browser window, and it will remain sharp 
no matter how high or low your user’s screen resolution. But you lose 
the advantage of being able to manipulate the image from the Java- 
Script — the elements of the image aren't present in the DOM. 


Referencing an SVG image from CSS 


In the same way that it can be used as an image in HTML, SVG can be 
referenced as an image in CSS: 


div { background: url(svg-2.svg) top right no-repeat; } 


dii 398 


\ 
THIS IS PARTICULARLY USEFUL IN CONCERT WITH CSS3'S background-size In 3 
PROPERTY, WHICH YOU'LL LEARN MORE ABOUT IN CHAPTER 10. YOU CAN CREATE mcr Дә 
Paj 
@ 
Embedding SVG as an object 


BACKGROUND IMAGES THAT SCALE WITH THE SCREEN RESOLUTION BUT STAY SHARP. 
The <object> element is a general-purpose method to embed any exter- 
nal content in your web page. To embed SVG with <object>, you need 
to supply two parameters specifying the filename and the file type: 


«object type="image/svg+xmL" data="svg—-2.svg"></object> 


In browsers with native support for SVG, the object-embedding 
approach has results similar to including the SVG inline: the SVG ele- 
ments are available in the DOM and can be manipulated. This tech- 
nique works in every browser that has SVG support; and if you're 
using the same SVG image on different pages of your site, it’s cached 
the same way a normal image would be, making your site load slightly 
faster. The corollary of this, of course, is that if you use the image only 
once it will require a second request to the server, making your site 


slightly slower to load. 
SVG support in older browsers with SVG Web and Raphael 


BROWSERS AND IE OFFER A COUPLE OF JAVASCRIPT LIBRARIES THAT 


YOU DON'T HAVE TO RELY ON DIRECT BROWSER SUPPORT FOR SVG. OLDER 
ENABLE SVG SUPPORT THROUGH ALTERNATIVE MEANS. 
OY 


| \ 
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SVG Web is a JavaScript library that, if it detects the browser has no 
native support for SVG, will replace any SVG graphics it finds with a 
Flash movie. The Flash movie will then take care of rendering the SVG 
in the browser. You have to make some slight modifications to your 
web page in order to enable SVG Web. The first is in the head of the 
document, where you reference the SVG Web JavaScript library: 


<script src="svg.js"></script> 


Then you have to surround each of your SVG graphics with <script> 
tags: 


<script type="image/svg+xmL"> 
«svg viewBox="0 0 320 240"> 
«rect x="50" y="50" width="100" height="100" 
style-"fill: rgb(255,0,0)"></rect> 
«line x1="50" у1="50" х2="150" y2="150" 
style-"stroke: rgb(0,127,127); stroke-width: 5; "></1іпе> 
«/svg» 
</script> 


Your SVG graphics will then render as SVG in browsers that support it 
and as Flash movies in browsers that don’t support SVG. In the follow- 
ing examples, at left you can see that SVG Web allows Internet 
Explorer to render inline SVG, although it doesn’t match the native 
support offered by browsers such as Firefox (shown on the right). 


sv — 
бебок ~ SVG nline with 3v GV 

төсем voa a 

n» 
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The Raphaél JavaScript library takes a different approach. Instead of 
making existing SVG work in IE, it presents an API for creating graph- 
ics. In Firefox, Chrome, Safari, and Opera it creates SVG; in IE, it cre- 
ates VML. The interface Raphaél provides looks similar to the <canvas> 
API: 


var paper = Raphael(10, 50, 320, 200); 
var circle = paper.circle(50, 40, 10); 
circle.attr(" fill", "#f00"); 
circle.attr("stroke", "#fff"); 


RAPHAEL LOOKS SIMILAR TO «canvas». BUT IT'S STILL SVG 
UNDERNEATH. THIS MEANS THAT WHEN YOU CALL THE CIRCLE FUNCTION, 
IT RETLIRNS AN OBJECT. THIS OBJECT CAN LATER BE MODIFIED, AND 
THE DRAWING WILL UPDATE TO REFLECT THE CHANGES; YOU DON'T HAVE 
TO CLEAR EVERYTHING AND REDRAW IT AS YOU DO WITH «canvas». 


Summary 


In this chapter you've learned how you can generate graphics in your 
web page on the fly using two different HTML5 technologies — «canvas» 
and SVG. Because both can be created and updated dynamically, they 
don't need the user to reload the page in order to present new informa- 
tion to the user. 


You've learned the basic techniques for drawing shapes and lines with 
both technologies, as well as how to import images and apply effects 
and transformations. With «canvas» you've looked at how to do simple 
animation while with SVG you saw how you can import whole web 
pages and apply transformations to them. 


NOW THAT YOU CAN CREATE YOUR OWN GRAPHICS ON THE FLY, IT'S TIME TO 
COMPLETE YOUR EDUCATION ON THE MULTIMEDIA POSSIBILITIES OF HTMLS 
WITH A LOOK AT THE NEW AUDIO AND VIDEO ELEMENTS. IN THE NEXT 
CHAPTER, YOU'LL SEE THAT HTMLS MAKES ADDING AUDIO AND VIDEO TO WEB 
PAGES AS EASY AS ADDING IMAGES TO WEB PAGES IS IN HTML4. 
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This chapter covers 


* Why audio and video are important on the web 
• Adding audio and video to your web pages 
* Encoding audio and video files far the web 


* Integrating video with other web platform features and content 


Native media support is one of the best known as well as one of the most 
controversial НТМІ5 features. In this chapter, you'll learn why HTML5 
media support is great, why it’s frustrating, and the practical factors you 


need to consider when using it. 


Audio and video on the modern web 


Audio and video are key parts of the modern web. For many sites, video 
and audio are parts of the content as integral as the text and pictures — 


and in some cases, they’re more important. 


119 
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Тарса Catenin 


Buzz Out Loud 1459: Meat puppets behind the 
servers (Podcast) 


set 


= 


For sites like BBC Radio 6 and last.fm, audio is the whole point of the 
page. And for podcasts like Buzz Out Loud, visitors expect to hear or 
see the content. 


VIDEO: Is Your Cat Confused by the Voting 

и <> You Tube -— Mss i dan ionem the Voting 
System Referendum 

How & Shodd Have Ended: Cal of Duty Modern Wartare 2 


[E] BBC News Channet 


ШП вас Radio 5 tive 


Lum etes moar бона world politik tram tem өарылг 


News sites like BBC Newsloften offer video and audio as alternative con- 
tent, and sites such as YouTube are all about the video content and are 
often used to add video to other sites such as I Can Has Cheezburger. 


Despite their rising importance, HTML4 offers no built-in method for 
adding audio or video to a web page. This makes embedding audio and 
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video relatively complex. Compare the markup required to add an 
image to a web page with that typically required to add a video. 


Image Video 
<img <object 
width="320" classid2"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
height="240" codebase="http://downLload.macromedia.com/ 
id="myimage" pub/shockwave/cabs/flash/ 
src="myimage.png"> swflash. cab#version=6,0,40,0" 


width="320" height="240" 
id="myvideoname"> 
<param name="movie" 
value="myvideo. swf"> 
<param name="quality" value="high"> 
<param name="bgcolor" value=#ffffff> 
<embed href="myvideo. swf" 
quality="high" bgcolor="#ffffff" 
width="320" height="240" 
name-"myvideoname" 
type-"application/x-shockwave-flash" 
pLuginspage="http: //www.macromedia. com/ 
go/getflashplayer"» 
«/embed» 
</object> 


Because there’s no native support for audio and video, web authors 
have had to resort to browser plug-ins. The web has largely settled on 
Adobe Flash as a de facto standard, but as the previous code shows, 
this is still a good deal more complex than putting an image on a page. 
And that’s not all the code that’s required: to add controls such as Play 
and Pause, there must be code written inside Flash, and even more 
code if the player needs to be integrated into other page content. 


ONE OF THE REASONS FOR YOUTUBE'S POPULARITY IS THAT IT REDUCES THE 
COMPLEXITY OF DISPLAYING VIDEO ON THE WEB-INSTEAD OF DOING ALL THE 
WORK YOURSELF, YOU UPLOAD THE VIDEO TO YOUTUBE AND THEN COPY AND 
PASTE SOME CODE. ВИТ HTML SHOULD MAKE IT THAT SIMPLE WITHOUT THE NEED 

FOR A THIRD-PARTY SITE. THIS IS A PROBLEM REMEDIED IN HTMLS WITH THE 92 
INTRODUCTION OF THE <audio> AND <video> ELEMENTS. 
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What is a plug-in? 


A plug-in is a generic extension method for HTML that allows the page author to 
indicate embedded content that is to be rendered by an external program. The 
web browser hands over control of that region of the web page to the external 
program. This external program is referred to as a plug-in. 


BROWSER 
VE 


The content rendered by the plug-in is like a black box to the browser. Browser 
features like keyboard shortcuts, cookie preferences, and pop-up blockers don’t 
apply. 


Following is the НТМІ5 code for embedding audio and video, which 
compares favorably with the <img> element. The screenshots show the 
default presentation of the <video> and <audio> elements in Firefox with 
the controls visible. 


Audio Video 


«audio src="myaudio.ogg" controls» «video src="myvideo.ogv" controls» 


«/audio» «/video» 


——z 
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FIREFOX SHOWS THE CONTROLS ON THE <video> 
ELEMENT ONLY WHEN THE USER MOUSES OVER AND AT 
INITIAL PAGE LOAD, BLIT OTHER BROWSERS HAVE THEM NS 
VISIBLE UNTIL THE VIDEO STARTS PLAYING. 
b 2 


Both elements in the previous example have been set to 520 x 240 pix- 


els with CSS, although in the case of the <audio> element you can see 


this doesn't achieve much. The <video> element is showing the first 
frame of the video. Note that the video is 320 x 180 pixels, but instead 
of stretching the video and changing the aspect ratio, the video is made 


as wide as possible and centered vertically. 


NOW YOU KNOW WHY HTMLS HAS «audio» AND «video» ELEMENTS 
AND WHAT THE BASIC CODE LOOKS LIKE. IN THE FOLLOWING 
SECTIONS, YOU'LL LEARN ABOUT THE «audio» AND «video» 
ELEMENTS IN MORE DETAIL. STARTING WITH THE «audio» ELEMENT. 


The «audio» element 


Browser support quick check: audio 


ecce 


Standard 


4.0 


3.5 


9.0 


10.5 


4.0 


Audio on the web gained something of a bad rap in the 
1990s as thousands of people happily attached back- 
ground music to their GeoCities pages, but there are 
plenty of legitimate uses for audio in a web page. 
Sometimes, websites are entirely about sound — band 
home pages should have samples of the band's work; 
dictionaries should allow you to listen to pronuncia- 
tion; games need sound effects. As you've learned, until 
the <audio> element, the only available option was a 
browser plug-in. In this section, you'll learn about the 
«audio» element, its supported attributes, file formats, 
and how to convert between them. 
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Common attributes: controls, autoplay, loop, and preload 
The <audio> element has several attributes that control its behavior, 
including src and controls, which you saw in the simple example. It’s 
possible to add the element with no attributes at all: 


«audio src="myaudio.ogg"> 
</audio> 


HEY! WHERE IS ТТ?!! 


VA 


The screenshot isn't interesting because there's nothing to see — with- 
out the controls attribute, the element isn't visible on the page. Having 
no visible controls means you have to start the audio playing by other 
means — either by using the autoplay attribute (discussed in a moment) 
or by providing your own controls (which you'll learn about in the sec- 
tion "The «video» element"). 


Adding the controls attribute means the <audio> element has visible 


properties: 


«audio src="myaudio.ogg" 


</audio> 


The preload attribute lets you hint to the browser whether a file is likely 
to be needed, so you can avoid excessive server load: 


<audio src="myaudio.ogg" controls preload="metadata"> 
</audio> 


It can take the following values: 


^ none— You don’t believe the audio resource is likely to be used. 


> metadata— You don't believe the audio is likely to be used, but the 
browser should fetch information such as the dimensions, first 
frame, and duration. 
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© auto—The server will have no problem with the browser download- 
ing the entire video even if the user doesn’t explicitly create it. 


The browser is free to ignore the preload attribute—for example, a 
mobile browser may choose not to download any media over a limited 
cell connection unless the user explicitly requests it. 


The autoplay and Loop attributes =r) 


specify that the file is to start playing 
as soon as the user loads the page and 
to continue to play repeatedly after 
it’s started: 

«audio src="myaudio.ogg" controls 


autoplay loop» 
</audio> 


Until recently the loop attribute didn’t have any effect in browsers, but 
you can simulate the effect in older browsers with a little JavaScript: 


«audio src="myaudio.ogg" controls autoplay onended-"this.playQ;"» 
</audio> 


The ended event is fired when the video has finished playing. The code 


waits for that event and starts the audio playing again when it happens. 


Be careful with autoplay. Remember, your users may be working in a 
quiet environment, or listening to music while they’re browsing, or 
depending on the audio provided by their screen-reader software, and 
they may not appreciate an audible interruption from a website they 
were only visiting to find a phone number. 


IF YOU'RE WONDERING WHY THE «audio» ELEMENT HAS OPENING AND 

CLOSING TAGS, IT'S BECAUSE <audio> IS ALSO A CONTAINER FOR 

OTHER CONTENT. THAT CONTENT IS DISPLAYED ONLY IF THE 

BROWSER DOESN'T SUPPORT THE <audio> ELEMENT. THIS ALLOWS 
YOU TO WORK AROLIND A LACK OF BROWSER SUPPORT. ә 
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The next example shows an <audio> element in IE8. The <audio> ele- 
ment itself is ignored, and just the contained content is displayed: 


<audio src="myaudio.ogg" controls> 
Audio not supported. AUDIO NOT SUPPORTED. 


</audio> 


Normally you would want to display something more useful than just 
the fact that the <audio> element isn’t supported. At least if you show a 
link, the user has the chance to download the audio file and listen to it 


in an external player: 


<audio src="myaudio.ogg" controls> 
«a href="myaudio.ogg"> 
Download myaudio.ogg 
</a> 
</audio> 


DOWNLOAD MYALIDIO.OGG 


Compare that with a browser like Firefox that does support the <audio> 
element, but not the media type specified in the src: 


Li gel s : " t 1 — 

<audio ane myaudio.ogg" controls» > 00:00 $) 
Audio not supported. - 

«/audio» 


«audio src="myaudio.mp3" controls» > 00:00 4 


Audio not supported. 
«/audio» 


Firefox doesn't support MP3, so the 
user still sees an audio control, but it's 
inactive. In other browsers, you may 
see a broken image icon or some 
other indication that the media is 
invalid. 


The «audio» element controls allow for a limited amount of styling with 
CSS. Here it's been set to 200 pixels square in Firefox: 
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audio { 
width: 200px; 
height: 200px; 
outline: 1px solid #ccc; 


} 


The outline shows the extent of the element. =r 
As you can see, the width is applied to the 

controls but the height is ignored. The next 

example makes that clearer: 


audio { 
width: 100px; 
height: 50px; 
outline: 1px solid #ccc; 


The controls have a minimum intrinsic width. If you try to make them 
smaller than that, the width will be ignored, as you can see from the 
still-visible outline in this example: 


audio { 
width: 50px; 


height: 25px; 


outline: 1px solid #ccc; 


Other browsers display slightly differently, as you can see in the next 
examples. Chrome (left) behaves similarly to Firefox: the controls 
extend out of the defined width and height. But Opera (right) is a little 


cleaner-looking at narrow width. 
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It’s currently impossible to change the colors of the controls in any 
browser. CSS like the following sets the background color, but it 
doesn’t make any difference to the controls themselves: 


audio { 
width: 200px; > ED 1:10 4) 
height: 50px; 
outline: 1px solid £ccc; 
background-color: #000; 
color: #fff; 


But it’s possible to use the background in concert with the otherwise- 
ignored height property: 


audio { 

width: 200px; 

height: 200px; 

outline: 1px solid £ccc; 

background: 
url('dust-puppy.svg') 
no-repeat top center; 

background-size: contain; 


} \ iio > 


You could use this CSS to provide an image 
of the artist or some sort of cover art. 


DESIGNERS MAY BE SEVERELY DISAPPOINTED WITH THE LACK OF STYLING OPTIONS 
AVAILABLE FOR THE AUDIO CONTROLS, BUT ALL ISN'T LOST. IN THE LATER SECTION 
“CONTROLLING AUDIO AND VIDEO WITH JAVASCRIPT,” YOU'LL SEE HOW YOU CAN 


WRITE “YOUR OWN CONTROLS, WHICH YOU CAN THEN STYLE HOWEVER YOU WISH. 


YOU'VE SEEN HOW SIMPLE IT IS TO EMBED AUDIO FILES, BUT UNFORTUNATELY 
THAT'S NOT THE END OF THE STORY. IN THE SAME WAY THE HTMLS STANDARD DOESN'T 
SPECIFY WHICH TYPES OF IMAGES A BROWSER SHOULD SUPPORT ON «img», IT ALSO NS 
DOESN'T SPECIFY WHAT TYPES OF FILE SHOULD BE SUPPORTED BY «audio»: BUT 
LINLIKE IMAGES, THERE ARE NO ALIDIO FORMATS THAT ALL THE BROWSER MAKERS 
HAVE DECIDED TO SUPPORT. THE NEXT SECTION DISCUSSES THESE ISSUES. эй 
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Codecs and license issues 


Audio files are usually stored in a compressed format. То be stored on a 
computer, they must be encoded into that format; to be played back, 
they have to be decoded once again. The software that performs this 
encoding and decoding is called a codec. Music files on your computer 
usually have a file extension that identifies which codec is needed to 
decode them. 


What is a codec? 


In principal, it’s possible to describe the raw data of audio and video streams to 
an arbitrary accuracy. For audio, you'd store the amplitude of the sound wave 
for each moment in time you wanted to play the sound back; for video, you’d 
store the color of each pixel for each frame (usually 25-30 per second) as well 
as the sound. But this would lead to impossibly large files for anything of a useful 
length. 


In practice, you want to compress the audio and video data in the same way you 
might compress a large file into a zip archive. A codec is what’s used to com- 
press audio and video data for storage and later to decompress the same audio 
and video to be played through speakers and displayed on screens in real time. 


Codecs can be split into two broad categories: lossless and lossy. Think about a 
zip archive: when you extract the content from it, you expect to get back the ex- 
act same files you put in—it’s a lossless compression. In the same way, some 
codecs are capable of compressing audio and video with no loss of information. 
But these files are necessarily still large. The more interesting set of codecs for 
the web are lossy—each time they’re used to encode a video stream, some infor- 
mation is thrown away, never to be seen again. These codecs can achieve far 
greater compression at the expense of some loss of audible or visual quality; the 
trick is to throw away data that makes as little difference to human perception 
as possible. 


YOU'VE ALMOST CERTAINLY HEARD OF AT LEAST ONE CODEC: МРЕФ-1 (OR 2) 

AUDIO LEVEL III, COMMONLY KNOWN AS MP3. MP3 IS A PERFECTLY GOOD 

CODEC TECHNICALLY—IT WAS THE FIRST POPULAR CODEC ABLE TO MAKE А 

TYPICAL POP SONG SMALL ENOUGH TO BE DOWNLOADABLE WHILE RETAINING 
CD QUALITY-BUT THERE ARE ISSUES OTHER THAN THE TECHNICAL ONES. N/A 


The problem with the MP3 codec is that there are several patents on it; 
and if you want to distribute software that encodes and decodes MP3, 
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you need to pay to license those patents. Mozilla, the makers of 
Firefox, takes the position that the web should be built out of free and 
open standards and so doesn’t support MP3; instead, Firefox supports 
the open Ogg Vorbis (OGG) format. Opera agrees. Google also agrees 
in principal but for practical reasons distributes Chrome with MP3 
support; Google has also released its own video format, WebM (which 
will be discussed further in the video section), which can also be used 
in audio-only mode. Apple and Microsoft both already have licenses to 
distribute MP3 codecs, so Safari and IE do support it; but, crucially, 
they don’t support the free and open OGG format out of the box. 


The different format support is summarized in the next table. The short 
version is this: no one file format works on all browsers. You'll need 


multiple files to support them all. 


WAV | OGG | МРЗ | AAC | WebM 


3.5 3.5 = = 4 


10.5 | 10.5 = ш 11.1 


Browser support quick check: 
audio codecs 


ecoe 


* JE9 will support WebM if the user downloads an additional 
codec. 
** Safari will support anything that can be played by Quick- 
Time. Users have to download additional codecs. 


To encode a file to OGG, you can use the oggenc command-line utility 
available from www.rarewares.org. Use it to convert an uncompressed 
WAV file like this: 


oggenc myaudio.wav 
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The output is a file called myaudio.ogg. To improve the quality of the 
encoding, use the -b flag to set the bitrate. The -o flag allows you to 
specify the output filename: 


oggenc myaudio.wav -b 256 -o myhighqualityaudio.ogg 


For MP3 audio, you can use the lame command-line utility, also avail- 
able from www.rarewares.org: 


lame myaudio.wav myaudio.mp3 
Again, you can set the minimum bitrate with a command-line flag: 


lame -b 256 myaudio.wav myhighqualityaudio.mp3 


Bitrate 


Bitrate is the number of bits (individual units of information) that are conveyed 
or processed per unit of time. Higher bitrates mean greater sound fidelity but 
also larger file sizes. Typical bitrates for CD-quality audio are in the 100-160 
kbit/s range. 


OGG AND MP3 BOTH WORK BY THROWING AWAY DATA THAT MAKES LITTLE 
ALIDIBLE DIFFERENCE TO THE HLIMAN EAR, BLIT THEY TEND TO THROW AWAY 
DIFFERENT PARTS OF THE AUDIO DATA. FOR THIS REASON, YOU SHOULDN'T 
CONVERT BETWEEN OGG AND МРЗ EXCEPT AS A LAST RESORT-IT S FAR BETTER 

TO CONVERT FROM A LOSSLESS FORMAT (FREE LOSSLESS ALIDIO CODEC IFLACI, 92 
WAV, ОК AN ORIGINAL CD) TO BOTH OGG AND MP3. 


Command-line utilities are handy, media.io 
especially if you have a large col- — 
lection of audio files, because you зонам ne ana upas n netu 


can write a script to convert them ii = 


all in a single batch. If you just 
have one or two files to convert, 
you may prefer a GUI-driven 
approach. For this, there’s a handy 
website: http://media.io. Visit the 
site, and select the file you want to 
encode from your hard drive. 
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After the file is uploaded, you're given a choice of four options for the 
codec and, if appropriate, a choice for audio quality. 


media.io 


Online Audio Converter 


Select your Ме and upload it. media.io will convert it immediately. Supported fie formats and fe size 


n Edw er REI 


Select Format MP3 WAY * occ WMA 
Select Quality Exreme а High Normal Lower 

Convert 
Bor юй © т» 3 SMK Г ^ хур Ы Johann Burkard 
media.io Select the options you need, 


| | and click Convert; a few sec- 
Converting Your Music 


Your converted Files will be displayed automatcally in a moment. Please do not close this window. onds later, your encoded file 
ENTORNO will be available to download. 
Meg & Dia - Its Always Stormy In Tillamook - 02 My Ugly Mouth.ogg Note that the 192 kbps OGG 


encoded file is approximately 
20% of the file size of the 


lossless original. 


You'll have noticed that the file used in this example, despite being 
originally encoded with the free FLAC codec, isn’t free content. 
Although it’s in the OGG format supported by Firefox, Chrome, or 
Opera, I’m not allowed to upload it to my website because I have no 
rights to redistribute it. But it will now take up less space on my phone! 


Even if I could upload it, the audio wouldn’t play in IE or Safari. 
Unless users have installed additional codecs in their operating sys- 
tems, Safari and IE won't play the OGG file —they need MP3. 
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If different browsers require different file types, how can you support 
multiple browsers with a single src attribute? HTMLS anticipates this 
issue and provides an easy mechanism for providing the correct source 
to each browser. Let’s look at that in the next section. 


Using multiple sources 
As you've just seen, you need to be able to provide different audio files 
to different browsers. But each «audio» element only allows you a single 
src attribute, so how can you manage that? The design of the <audio> 
element has anticipated this requirement. Multiple sources can be pro- 
vided for the «audio» element by using the «source» element: 


«audio id-"myaudio" controls» 
«source src="myaudio.mp3" type="audio/mp3"> 
«source src="myaudio.ogg" type="audio/ogg"> 
No audio support! 

</audio> 


The following tables list the common file extensions and MIME types 


for audio. 
Audio type File extensions MIME types 
MP3 .mp3 audio/mpeg 
MP4 .m4a, .m4b, .m4p, .m4v, audio/mp4 
.m4r, .3gp, .mp4, .aac audio/aac 

OGG .Ogg, .oga audio/ogg 

WebM мерт audio/webm 

WAVE .wav audio/wave (preferred) 
audio/wav 
audio/x-wav 
audio/x-pn-wav 


Browsers are expected to scan the list of «source» elements from top to 
bottom and load the first one they believe they can play. By using some 
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JavaScript, you can interrogate the <audio> element and find out which 


file is loaded. 


SS] Sa 


PLAYING FILE MYAUDIO.O0GG PLAYING FILE MYAUDIOMP3 


Firefox plays the ogg file. Internet Explorer plays the .mpó file. 


Here's the snippet of JavaScript used in the previous screenshots. Add 
it to the «audio» element as an attribute, and add a <div id="source"></ 
div» after the «audio» element to display the output: 


onloadeddataz"document.getElementById('source') 


.innerHTML = 'Playing file ' + 
this.currentSrc.slice(this.currentSrc.lastIndexOf('/')41);" 


This code is executed in the 1oadeddata event, which means after the 
browser has loaded identifying information about the file. You'll learn 
more about manipulating HTML5 media elements with JavaScript in 


the section "The «video» element." 


AUDIO IS FINE, BUT IT LACKS VISUAL IMPACT. LET'S MOVE ON TO 
EMBEDDING VIDEO. IN THE NEXT SECTION, YOU'LL SEE THAT ADDING 
— VIDEO TO APAGE IN HTML5 IS JUST AS SIMPLE AS ADDING AUDIO. 


The <video> element 


For the many people who don’t obsessively read standards groups’ 
mailing lists, the first time they became aware of HTML5 was when 
they found out that Flash video doesn't work on the iPhone but 
НТМІ5 video does. As you saw in the introduction, the goal of the 
НТМІ5 <video> element is to make embedding video in your pages as 
easy as embedding images. This section looks at the details of making it 
work. We'll follow a pattern similar to the previous section: first the 
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USER FRIENDLY by J.D. “Iliad” Frazer 


IT HAS AN ELEMENT 
FOR VIDEO. LIKE 
HTML4 HAS AN ELEMENT 


WHAT DO YOU MEAN, HTMLS 
SUPPORTS VIDEO? 


FOR IMAGES. 


Ц BUT I SEE VIDEO ON THE WEB 

i ALL THE TIME, I EVEN SET UP A WHERE ARE YOU 
WEBCAM TO MONITOR MY CAT. TIBBLES?/? WHAT HAVE 

E YOU DONE WITH MY CAT! 

{| IT PROBABLY USES 

È| FLASH. EVER CHECKED 

" ІТ ON YOUR IPHONE? 

_ 

4 

8 


allowed attributes, then the various encoding issues, and finally how to 


convert between file formats 


Browser support quick check: video 


ecce 


Standard 


4.0 


3.5 


9.0 


10.5 


4.0 


The basic «video» element looks like this: 


«video src="00092.webm"></video> 


A «video» element without controls is a lit- 
tle more interesting than the equivalent 


The sample video 


The sample video used in this section's examples is of the au- 
thor playing American football. Because this video was taken 
by the author's mother, we can neatly sidestep any issues in- 
volving media distribution rights. 


«video» element attributes 

The «video» element supports the same attributes as the 
<audio> element, with similar results. This section 
quickly runs through them in the same way as the sec- 


tion on audio. 


«audio» element because you at least have 
the first frame of the video to look at. This 
screenshot was taken in Firefox; Opera 


and Chrome should work just as well for 


the WebM format. 
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As with audio, you can enable the 
standard controls with an attribute: 
<video src="00092.webm" 


controls preload="metadata"> 
</video> 


As with the <audio> element, the preload 
attribute provides a hint to the browser 
about how likely this video is to be 
played by the user. 


If you add the autoplay attribute, on 
desktop browsers, the video will 
download and start playing as soon 
as possible: 


«video src="00092 .webm" 
controls autoplay loop> 
</video> 


The controls are available, but they auto- 
hide as the video starts playing. 


As with the <audio> element, loop only works on the most recent browser 
versions, but it can be simulated with the same bit of JavaScript: 


onended="this.play();" 


Also as with the <audio> element, the <video> element can contain fall- 
back content. At the end of this chapter, we'll look at using that content 
to embed an alternative player for your videos using a plug-in, falling 
back to HTML4 technologies for browsers that don't support HTML5. 


The <video> element also has its own specific attributes: poster, width, 
height, and audio. Let's look at each of those in turn. 


The poster attribute lets you control what's shown in the <video> ele- 
ment when a video isn't playing. By default, browsers show the first 
frame of the video, but you can supply your own image: 
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«video src="videofile.ogv" 
poster-"posterimage.jpg' » 
</video> 


The width and height attributes set the 
width and height of the <video> element: 
«video src="videofile.ogv" 


width="400px" height="300px"> 
</video> 


Note that this doesn’t directly set the width 
and height of the video itself; the aspect 
ratio of the video is always preserved. You 
can also set the width and height with CSS: 
video { 

width: 400px; 

height: 300px; 


If you set width and height attributes and 
also set the width and height with CSS, the 
CSS wins: 


<video src="videofile.ogv" 
width="400px" height="300px" 
style="width: 320px; 
height: 180px;"> 
</video> 


The muted attribute sets the default volume 
of the video to 0: 


«video src="videofile.ogv" muted> 
</video> 


Unfortunately it doesn’t yet work in any 
browsers, but you can fake it with this bit 
of JavaScript: 


onloadeddata-"this.volume = 0;" 
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Containers, codecs, and license issues 


The situation with video is even more complex than with audio because 
video files need both a visual and an auditory stream, so they need both 
video and audio codecs. A format to contain both audio and video also 


needs to be defined. 
S ` UNLIKE AUDIO FILES, WHERE. THE FILE EXTENSION IS LINKED DIRECTLY 
TO THE CODEC BEING USED, WITH VIDEO THE FILE EXTENSION I$ LINKED 


TO THE CONTAINER FORMAT. TO BE ABLE TO PLAY THE VIDEO, THE BROWSER 
NEEDS TO SLIPPORT THE CONTAINER FORMAT, THE VIDEO CODEC, AND THE 
m d AUDIO CODEC. IN PRACTICE, THIS ISN'T TOO MUCH OF A FACTOR BECAUSE 
AUDIO CODECS WITHOUT LICENSE FEES ARE ALWAYS PAIRED WITH VIDEO 
CODECS THAT DON'T REQUIRE A LICENSE, AND VICE VERSA. 


YOU NOW KNOW ABOUT ALL THE ATTRIBUTES AVAILABLE ON THE <video> 
ELEMENT. IT'S TIME TO ADDRESS THE THORNY ISSUE OF VIDEO CODECS, WHICH IS 
EVEN MORE OF A MESS THAN THE SITUATION WITH AUDIO CODECS. THIS HAS BEEN 
ONE OF THE MORE CONTENTIOUS ISSUES IN THE WRITING OF THE HTMLS SPEC, 
NOT LEAST BECAUSE VIDEO SUPPORT IS SEEN AS BEING SO IMPORTANT. 


Browser support quick check: 
video formats 


MPEG-4 | Ogg/Theora WebM 
е 5* 5 8 
е = 3.5 4 
e : А " 
О = 10.5 114 
e 


* Google has announced that Chrome will stop supporting 


MP4 in a future release. 


** [E9 will support WebM if the user downloads an addi- 


tional codec. 


*** Safari will support anything that can be played by Quick- 
Time. Users have to download additional codecs 
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Following are the common file extensions and MIME types for video. 


Video type File extensions MIME types 
MPEG-4 .mp4 video/mp4 
OGG .099, .ogv video/ogg 
WebM .webm video/webm 


MPEG-4 profiles 


The MPEG-4 standard contains several different profiles in order to support a va- 
riety of different expected use cases, ranging from Blu-ray and HDTV to mobile 
phones with low screen resolutions. Mobile devices aren’t expected to support 
the same profiles as desktop PCs or dedicated home multimedia equipment, so 
when you’re encoding videos for use on iPhones make sure you’re targeting the 
Simple Profile. 


Easy encoding with Miro Video Converter 
Rather than mess around with the different codecs and encoding 
options yourself, there are tools that make things easy for you. One of 
the simplest is the Miro Video Converter, available from www. 


mirovideoconverter.com. 


Miro Video Converter doesn’t present you with a lot of options —just a 
place to drop the file you want to convert; a drop-down list to say what 
you want to convert it to; and a button to 
start the conversion. After you drop a 
video file on the central area, only the out- 
put format needs to be selected before 
you're ready to go. 


The first three options are the main ones RRP ырыу ран 
that interest us: 


"E "——— 


© Theora is the OGG video format sup- 
ported by Opera and Firefox. ‚ 
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^ WebM (VP8) is Google's new video codec, supported by Chrome and 
newer versions of Opera and Firefox. 


^ MP4 videoi s the format supported by Safari and IE. 


Formats 


WebM (рё) 
MPs Video 
MP3 (Audio Only) 


Behold 0 
Сід / DEXT 
Droid 

Eris / Desire 


Hero 

Magic / myTouch 

Nexus One 
Devices: Apple 

iPad 

iPhone 

iPod Classic 

iPod Nanc 

iPod Touch 


FFMPEG Output 


The additional options are variations of 
these main three, except that the output 
video is scaled for the particular device. 


After you set the option, click Convert and, 
depending on how large your video is, wait 
a few minutes or a few hours. Repeat the 
process for as many encodings as you 
require. 


The main advantage of this approach is that 
it’s easy and requires little expertise. The 
disadvantage is that if you don’t like the 
results, you have to take a different 
approach—there аге по configuration 
options for you to tweak. 


MIRO VIDEO CONVERTER CAN GIVE YOU A HEAD START IF YOU WANT A MORE FINE- 
TUNED APPROACH. NOTE THE FFMPEG OUTPUT BUTTON AT LOWER RIGHT IN THE 
— FIGURE. FFMPEG IS THE COMMAND-LINE UTILITY THAT MIRO VIDEO CONVERTER 
USES TO DO THE ENCODING. IN THE NEXT SECTION, YOU'LL SEE HOW YOU CAN USE 
FFMPEG DIRECTLY FOR FINER-GRAINED CONTROL OVER THE ENCODING PROCESS. 


Advanced encoding with FFmpeg 


FFmpeg is a command-line tool originally written for the Linux operat- 


ing system. It’s powerful and has thousands of options that you can set 


by passing options on the command line. Rather than get into the 


details of how FFmpeg works, which could easily take up a few 
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chapters, let’s use the Miro Video Converter output as a starting point 
and look at some easy ways to tweak things. 


If you click the FFMPEG Output button while encoding a WebM 
video, you'll see that the command being used, on Windows, is some- 
thing similar to this: 


ffmpeg—bin\ffmpeg.exe -y -i "C:\00092.MTS" -f webm 
-vcodec libvpx -acodec libvorbis -ab 160000 
-crf 22 "C:N00092 .мертур8 . мерт" 


You can run this yourself at the command prompt. Here's a quick run- 
down of what the parameters mean (don't worry too much about the 
details — for the most part you won't need to change these): 

© -y— Overwrite any existing output without prompting. 

^ -f— Container format. 

^ -acodec— Audio codec to use. 


> -crf — Set the constant rate factor (crf). This automatically varies the 
bitrate to maintain a consistent quality. 


© -i—Input file. 
> -vcodec— Video codec to use. 
© -ab— Audio bitrate to use. Bigger numbers lead to larger files. 


One easy change you might want to make is to change the size of the 
output video, using the -s parameter. This example sets the output to 


320 pixels wide by 180 pixels high: 


ffmpeg—bin\ffmpeg.exe -y -i "C:N00092.MTS" -f webm 
-vcodec libvpx -acodec libvorbis -ab 160000 
-s 320x180 -crf 22 "C:\00092.webmvp8.320.high.webm" 


It’s also easy to adjust the quality of the output file by specifying a 
bitrate. To do so, use the -b parameter: 


ffmpeg-bin\ffmpeg.exe -y -i "C:\00092.MTS" -f webm 
-vcodec libvpx -b 3600k -acodec libvorbis -ab 160000 
-s 320x180 "C:\00092 .webmvp8 .high.webm" 
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The same options can be applied to the command for iPhone MP4 
encoding, although that has a few extra options specified by default: 


ffmpeg—bin\ffmpeg.exe -i "C:N00092.MTS" -f mp4 
-acodec aac -ac 2 -strict experimental -ab 160k 
-s 320x180 -vcodec libx264 
-vpre slow -vpre ipod640 -b 1200k 
-threads © "С:\00092.ірһопе. 320 .тр4" 


One thing to watch for when running the Miro version of FFmpeg is 
the location of the preset files. The slow and ipod640 presets used in the 
previous command correspond to the libx264 -slow.ffpreset and 


libx264-ipod640.ffpreset files. Put these files in C:\usr\local\share\ 
ffmpeg so that ffmpeg.exe can find them. 


Using multiple sources 


S 


Now that you have a collection of video files to support all the different 
browsers and devices your users may be using, you can add them to the 
«video» element using the «source» element, just as with the «audio» ele- 


ment earlier: 


«video id="myvideo" controls» 
«source src="00092.webm" type="video/webm"> 
«source src="00092.mp4" type="video/mp4"> 
«source src-"00092.10w.mp4" type="video/mp4"> 
«source src="00092.ogv" type="video/ogg"> 
No video support! 

</video> 


IF YOU EXPECT TO HAVE USERS WITH OLDER VERSIONS OF IOS, THEN YOU SHOULD BE 

AWARE THAT ALTHOUGH THE <source> ELEMENT IS RECOGNIZED, ONLY THE FIRST ONE 

WILL EVER BE USED. IN THE PREVIOUS EXAMPLES, YOU SHOULD PUT THE 

O0049Z.LOW.MP4 SOURCE FIRST SO OLDER 1055 WILL PLAY IT. OF COURSE, THIS 

MEANS USERS OF MODERN DESKTOP BROWSERS THAT SUPPORT MPEG-4 WILL PLAY THIS 
\ LOW-QUALITY VIDEO INSTEAD OF THE HIGHER-QUALITY ONES FURTHER DOWN. 


As with the <audio> element, it’s possible to find out which file the 
browser has chosen by looking at the currentSrc property of the <video> 
element in JavaScript. Adding this snippet of code to the <video> 
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element reports the filename to an element with ID 'source' when the 


video has loaded: 


onloadeddata- 
"document.getElementById('source') 


.innerHTML = 'Playing file ' + 
this.currentSrc.slice(this.currentSrc.lastIndexOf('/')41);" 


Loading the page in a variety of different browsers shows how the mul- 
tiple source elements are picked up. 


Playing file 00092.low.mp4 


PLAYING FILE OOOqZWEBM 


Android browser uses the low-quality MP4. Firefox 4 uses the WebM video. 


PLAYING FILE ОООЯ206У PLAYING FILE OOO9Z06V 


Firefox 3.6 uses the Ogg video. Desktop Safari uses the high-quality MP4. 


YOU'VE NOW LEARNED HOW TO ADD AUDIO AND VIDEO TO YOUR PAGES, AND HAD A BRIEF 
INTRODUCTION TO THE MINEFIELD THAT IS VIDEO ENCODING FOR DESKTOP BROWSERS 
AND MOBILE DEVICES. BUT SO FAR, YOU HAVEN'T SEEN MUCH OF THE MAIN ADVANTAGE OF NS 
USING HTMLS VIDEO AND AUDIO: INTEGRATION WITH THE REST OF YOUR PAGE 
CONTENT. IN THE NEXT TWO SECTIONS, YOU'LL LEARN ABOUT THE POSSIBILITIES 
THIS ALLOWS, STARTING WITH AN EXPLORATION OF THE JAVASCRIPT АРТ. 
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Controlling audio and video with JavaScript 


Earlier in this chapter, you saw that, by default, <audio> and <video> ele- 
ments don’t provide controls for the user to interact with them; it’s up 
to the web author to explicitly ask for controls to be provided. At the 
time, you'd be forgiven for thinking that this is a bit pointless —what 
good is a video if you can’t play it? In this section, you'll discover 
exactly how useful it can be to have complete control over the video 
from JavaScript. 


To begin with, let’s look at playing and pausing a video. This is straight- 
forward —the <video> element provides playO and pause() methods: 


<button 
onclicke"document.getElementById('myvideo') 
.playO ;"» 

Play 
</button> 
<button 
onclicke"document.getElementById('myvideo') 
.pauseQ ;"> 

Stop 
</button> 


Instead of providing controls on the video, buttons are provided on the 
page. If your first thought when you saw the default controls was, 
“Ugh! I don't like the look of those. How can I style them myself?” 
then here is the answer: create your own elements to control the video, 
and style them however you wish. 


You don’t have to limit yourself to the standard operations of Play and 
Pause. This function starts the video play from a point in the middle of 
the stream; you pass in the point as a parameter: 


function playFrom(secs) { 
var v = document 
.getElementById('myvideo'); 
v.currentTime = secs; 
v.playO; 
} 


Play trom 4 secs | Play from 8 secs 
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You can then provide buttons to start 
playback from significant points: 

«button onclick="playFrom(4) ; ">Р1ау from 4 
secs</button> 


«button onclick="playFrom(8) ; ">Р1ау from 8 
secs</button> 


Obviously there aren’t many significant points in a 15-second video 
clip, but this would be useful if you had a podcast or longer movie and 
wanted to provide bookmarks for when particular topics were being 
discussed or for the start of each scene. 


In the example, although the buttons claim Play trom 4 secs | | Play from 8 secs 
to start the video play at the fourth and 
eighth seconds, the user has no way of see- 
ing if they really work. When the controls 
are hidden, you lose not just Play and Pause 
but also the timeline. Fortunately, HTML5 
provides a new «neter» element that's excel- 


lent for measuring how much of a video or 


audio clip has been played: 


«meter id-"mymeter" min="0"></meter> 


The value of the meter needs to be continually updated as the video is 
playing. For this you use the timeupdate event, adding that to the 
«video» element alongside the loadeddata event already being used to 
capture the filename of the video being played: 


«video id="myvideo" ontimeupdate-"updateTime(this);" 
onloadeddata="dataLoaded(this) ; "> 


Here's the dataLoaded function. It's been updated to set the max value of 
the <meter> element so that it exactly matches the duration of the loaded 
video: 


function dataLoaded(v) { 
document .getElementById('source') 
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.innerHTML = 'Playing file ' + 
v.currentSrc.slice(v.currentSrc. LastIndexOf('/')+1); 
т = document.getElementById('mymeter'); 
m.max = v.duration; 
m.value = 0; 


} 


The code to update the meter element is even simpler; it just sets the 
value of the <meter> element to the currentTime of the <video> element: 


function updateTime(v) { 
т = document.getElementById('mymeter'); 
m.value = v.currentTime; 


DIRECT ACCESS TO THE <audio> AND <video> ELEMENTS WITH JAVASCRIPT 
ISN'T THE ONLY BENEFIT OF HAVING MEDIA BE AN INTEGRAL PART OF YOUR 

— PAGE CONTENT: OTHER BROWSER TECHNOLOGIES SUCH AS CSS AND SVG CAN 
ALSO BE APPLIED. THE NEXT SECTION SHOWS YOU HOW. 


Integrating media with other content 
The <video> and <audio> elements are just like any other element on the 
web page. They can be styled with CSS and used in JavaScript. To 
begin, let’s look at applying CSS transforms and transitions. The fol- 
lowing three screenshots show the same web page over the course of 10 
seconds. 


SUN О! MAY 20 00:0844 BST SUN О! MAY 2011 OO:O8« BST SUN О! MAY 201 ОО:О&53 BST 


The code for this example, slightly elided, is shown next; see the full list- 
ing in ch04/video-css-transitions.html. Don’t worry too much about the 
details for now; read the sections “2D transforms” and “CSS transitions” 
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in chapter 9 for a more in-depth discussion. In the meantime, remember 
that anything you can do to HTML elements with CSS can be done to the 
<video> element: 


div video { <div> 
transition-duration: 10s; «video id="myvideo1" 


} width="160" 


div:hover video:nth-child(1) { 
transform-origin: bottom 

right; 
transform: rotate(16.5deg) ; 

} 

div:hover video:nth-child(2) { 
transform-origin: top right; 
transform: rotate(33deg); 

} 


autoplay loop» 

<source src="00092.webm" 
type="video/webm"> 

«source src="00092.mp4" 
type="video/mp4"> 

«source src="00092.low.mp4" 
type="video/mp4"> 

«source src="00092.ogv" 
type="Vvideo/ogg"> 


div:hover video:nth-child(3) { 
transform-origin: top left; 
transform: rotate(66deg); 


No video! 
«/video» 
«video id="myvideo2" 


H «video id="myvideo3" 
«/div» 
CSS TRANSITIONS ARE COVERED IN DETAIL IN CHAPTER 9; ANY OF THE C3 


EFFECTS DESCRIBED IN THAT CHAPTER CAN BE APPLIED TO THE «video» 
ELEMENT. THE PREVIOUS EXAMPLE APPLIES THREE TRANSFORMS TO THREE 
IDENTICAL «video» ELEMENTS WITH A 1O-SECOND TRANSITION ON : hover. м 


(зо 


In the previous chapter, you learned that the <canvas> element can grab 
an image from anywhere on the page and subject it to various transfor- 
mations. One of the more exciting features of HTMLS is that those 
same canvas manipulation tricks also work with the <video> element. 
The next example looks at the basic process of getting a frame from the 
video into a «canvas» element by making a frame grabber. 


First, let's get the HTML sorted out. Start with the usual <video> ele- 
ment, and add as many sources as required; you can use the code from 
"Using multiple resources" as a starting point. 
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<video id="myvideo" controls> 
<source src="00092.webm" 
media="video/webm"> 
No video! 
</video> 


You need something for the user to 
click to signal that they want to grab a 


frame. A <button> element is easiest: 


PLAYING FILE OOOa3Z2WEBM 


«button onclick="SnapQ) ; "> 
Snap 
</button> 


Place that before the <video> element. 
You also need a <canvas> element to 
put the frame in later: 


<canvas id="mycanvas"></canvas> 


Put the «canvas» element after the div with id 'source'. All the action 


happens in the snapO function: 


function ѕпар() { 


var video = document 
.getElementById('myvideo'); 

var canvas - document 
.getElementById('mycanvas'); 

canvas.width = video.videoWidth; 

canvas.height = video.videoHeight; 

var ctx = canvas.getContext('2d'); 

ctx.drawImage(video, 0, 0); 


j 


Most of this function is plumbing — 
grabbing references to the relevant 
elements and setting the width and 
height of the canvas to match the 
video. The code that draws the cur- 
rent frame on the canvas is this: 


ctx.drawImage(video, 0, 0); 
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It's that simple! If you want to have 
some fun, refer back to the canvas 
transformations in chapter 3 and try 
them on frames of a video. 


The other thing you learned about in the previous chapter was SVG — 
in particular applying SVG effects such as transforms, clips, and masks 
to HTML content with «foreignobject». Because the «video» element is 
HTML content just like any other, those same effects can be applied. 
The following screenshots show a <video> element clipped to appear 


inside some text and then animated. 


EI 


HIM: 
VIDEO нт.» 
ROCKS! ыты WADE 


Sat 30 Apr 2011 23:30:04 BST Sat 30 Apr 2011 23:30:09 BST Sat 30 Apr 2011 23:30:13 BST 


Here’s the content of the SVG embedded into the HTML. Note that the 
SVG has HTML embedded into it in turn: 


<defs> CLIP PATH TO 
«clipPath id="img1" clipPathUnits="userSpaceOnUse" -«— USE ON VIDEO 
width="320" height="200"> 


«text x="0" y="70" font-family-"sans-serif" ——__ TEXT USED TO 
font-size="80" font-weight-"bold"» CLIP VIDEO 
<tspan>HTML5</tspan> 


«tspan x="5" yz"134" font-size="85">VIDEO</tspan> 
«tspan x="5" y="186" font-size="70">ROCKS! </tspan> 


</text> 
</clipPath> 
</defs> 
«g clip-path="url (#img1) "> HTML 
<foreignObject x="0" y="0" width="320" height="200"> а DUKE 
«body» 


«video id="myvideo" width="320" height="200" 
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autoplay loop» 
«source src="00092.webm" type="video/webm"> 
«source src="00092.mp4" type="video/mp4"> 
«source src="00092.low.mp4" type="video/mp4"> 
«source src="00092.ogv" type="video/ogg"> 
No video! 
</video> 
</body> 
«/foreignObject» SVG ANIMATION 
«animateTransform attributeName-"transform" ad 
type-"translate" values="0,0;0,220;0,0" 
begin="0s" dur="10s" fill="freeze" 
repeatCount="indefinite"> 
</g> 


Does HTMLS5 video replace Flash? 


The short answer is, no. There are several things for which Flash is the only op- 
tion now, and some things for which HTMLS video is never likely to be an option. 
Flash has support for Real Time Streaming Protocol (RTSP) and the Real Time 
Messaging Protocol (RTMP), which provide facilities such as adaptive streaming, 
switching the bitrate of the video stream as the available bandwidth varies, and 
digital rights management (DRM). 


It’s possible that HTML5 video will one day support adaptive streaming, but it's 
extremely unlikely that it will ever support any features for DRM in a cross- 
browser fashion. If you want to use DRM on your video and audio content, then 
you'll need to continue using Flash. 


AS YOU MAY HAVE GUESSED, BROWSER SUPPORT FOR AUDIO AND VIDEO IS 
Zz SOMETHING OF А THORNY SUBJECT. LET'S LOOK AT THE DETAILS. 


Browser support 


Support for both <video> and <audio> elements is universal across all 
current browsers. The problem at this point is finding the minimum 
number of different encodings for maximum browser compatibility. 
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eeoc0e€ 

12 14 4 6 8 |9 |10 | 11.5 12 5 5.1 
<audio> element ° ° ° ° ° ° ° ° ° ° 
WAV audio ° ° ° ° ° ° ° ° 
MP3 audio ° ° ° ° ° ° 
OGG audio e ° ° ° o o ° ° o o 
<video> element ° ° ° ° ° ° ° ° ° ° 
OGG video ° ° ° ° o o ° ° o o 
MP4 video ° ° ° ° ° ° 
WebM video ° ° ° ° o o ° ° o o 
Key: 


e Complete or nearly complete support 
o Incomplete or alternative support 
Little or no support 


Web server configuration for audio and video 
The first thing you need to consider when serving video and audio is 
that you have to make sure the correct MIME types are sent in the 
headers. The MIME type sent by the server should match the value set 
in the type attribute. On the common Apache server, this means using 
the AddType directive. This can go in the server configuration files or in 


an .htaccess file in your website directory. The relevant values for 
HTMLS audio and video are as follows: 


AddType audio/ogg oga ogg 
AddType audio/mp4 m4a 
AddType video/ogg Оду 
AddType video/mp4 mp4 m4v 


AddType video/webm webm 
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Supporting legacy browsers with Flash video 
It's possible to get the best of both worlds: HTMLS video for browsers 
that support it and Flash for browsers that don't. At its simplest, this is 
a matter of wrapping the code for Flash inside the <video> element: 


«video id="myvideo" controls» 
«source src="myvideo.webm" type="video/webm"> ~t—.__ SOURCES FOR 
«source src="myvideo.mp4" type-"video/mp4"» ORAT 
«source src-"myvideo.low.mp4" type="video/mp4"> 
«source src-"myvideo.ogv" type-"video/ogg'» 


«object 
classid-"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase-" http: //download.macromedia.com/ ADD FLASH 


pub/shockwave/cabs/flash/ CODE IN 


<video> 
swflash.cab#version=6,0,40,0" ELEMENT 
width="320" height="240" 
id="myvideoname"> FLASH MOVIE 
<param name="movie" value="player .swf"> -а—— ISAPLAYER 
<param name="quality" value="high"> 
<param name="bgcolor" value=#ffffff> келш 
<param name="flashvars" value-"file-myvideo.mp4"» ~<— TOPLAY 
</object> 
No video support, «a href="myvideo.webm">try downLoading</a>! 
</video> 


Browsers that support the <video> element will ignore the fallback con- 
tent, whereas browsers that don’t support the <video> element will 
ignore that and only see the <object> element that embeds the Flash 
plug-in. Browsers that support neither the <video> element nor the 
Flash player will see the link to download the video. 


Summary 


In this chapter, you've learned about multimedia on the web, playing 
audio and video with simple markup. You've seen the benefits of hav- 
ing multimedia content integrated with the rest of your web page con- 
tent and looked at manipulating that multimedia with JavaScript. 


HTMLS OFFERS MANY OTHER OPPORTUNITIES FOR MANIPULATING YOUR 
CONTENT IN NEW AND EXCITING WAYS WITH JAVASCRIPT, SUCH AS WYSIWYG 

— EDITING AND DRAG-AND-DROP INTERACTION. THE NEXT CHAPTER LOOKS AT 
THEM IN MORE DETAIL. 
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This chapter covers 


* Directly editing page content with contentEditable 

* Simulating desktop-like interactions with the drag-and-drop AFI 

* Convenient access to semantic metadata with the microdata AFI 
* How to not break the Back button with the history AFI 


* Keeping web apps responsive with web workers 


This chapter looks at HTML5 application programming interfaces (APIs) 
that work “in browser" —that is, APIs that work directly with loaded web 


pages rather than accessing the network or web and relying on server 
functionality. 


TO FOLLOW THE EXAMPLES IN THIS CHAPTER, YOU'LL NEED TO HAVE A BASIC 
UNDERSTANDING OF JAVASCRIPT. READ APPENDIX D FIRST IF YOU NEED 
MORE HELP. OR, IF YOU'RE MORE OF A DESIGNER THAN A DEVELOPER, SKIP 
AHEAD TO CHAPTER 7, WHERE WE START TO LOOK IN DETAIL AT CSS3. 


153 
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What is an HTML5 API? 


The HTMLS5 spec is ground-breaking in many ways, but one of the key ways is 
that it specifies both the syntax of the HTML markup and the APIs you should 
use to manipulate the document with JavaScript. Earlier specs kept those sepa- 
rate: the Web Hypertext Application Technology Working Group (WHATWG) felt 
this was both a source of needless duplication and a recipe for inconsistency. 
You've already seen several of HTML5's APIs in action—the form-validation API 
in chapter 2, the canvas in chapter 3, and the video and audio APIs in the last 
chapter—but there are many more. 


The WHATWG produced a very long HTML spec that splits into 11 standards at 
the МЗС, one of which is the HTMLS spec. In addition, several other specs, such 
as the Geolocation API, have never been part of the WHATWG spec but are con- 
sidered part of the HTML5 buzzword nevertheless. In this book, we'll follow the 
more liberal definition because that lets you play with more fun stuff! 


USER FRIENDLY by J.D. “Iliad” Frazer 


ine BUZZWORD "HTMLS* IS USED FOR 50 WEB WORKERS STILL HTMLS? 


AM WANTINK T мо | 
INK TO BE USING |з veRyTHING NEW. LIKE AJAX GOOD. AM WANT INK WORLD 


WEB Marine tton DESCRIBED EVERYTHING PEOPLE DID DOMINATION APP TO BE 
DOMINATION APP. BUT WEB {ттн JAVASCRIPT FIVE YEARS AGO. BUZZWORD COMPLIANT! 


| 


WORKERS NOT IN HTMLS SPEC/ 


Е 
i 
} 
! 
i 
i 
H 


S | FIRST, LET'S LOOK AT ONE OF THE APIS THAT'S PART OF THE CORE HTMLS 

у SPECIFICATION: contentEditable. ІТ ALLOWS RICH-TEXT EDITING IN THE 
| SSS/~ — 7 BROWSER-A WHAT-YOU-SEE-IS-WHAT-YOU-GET (WYSIWYG) ENVIRONMENT SIMILAR 
^ TO THE EXPERIENCE PEOPLE ARE USED TO WITH MODERN WORD PROCESSORS. 


TN 


Rich-text editing with the contenteditable attribute 


The web was originally intended to be a place where people would cre- 
ate and share documents. But web browsers are complex to implement 
on their own, and existing text editors were good enough for creating 
web documents, so the creation and viewing of web content has histor- 
ically been kept separate. Various solutions have arisen that enable the 
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creation of content from a web page, but these have 
depended mostly on server capabilities rather than 
on any built-in support in HTML. This changes in 
HTML5 with the advent of the contenteditable and 
spellcheck attributes. 


USER FRIENDLY by Iliad 


OUR WEBSITE: I 

WANT IT TO DRIVE 
ENGAGEMENT WITH 
SOCIAL CURRENCY. 


/ 


ER.. YOU WANT 


Basic text editing 


I WANT TO UPDATE 
THE WEBSITE MORE 
FREQUENTLY. 


/ AH! ОК, I'M SURE 
AJ.WILL DO 


Copyright (c) 1999 Iliad — http:www.userfriendly.org! 


/ LISTEN STEF, JUST 
G/ TELL ME WHAT IT 
IS YOU WANT. ~ 


Making an element editable is as easy as adding an attribute: 


«p contenteditable="true">Stef works Content editable 1 ттен 
Die Edit yew History Bookmarks pols Help 

as the Corporate Sales Manager. He « Content editable 1 E Y 
STEF 


much more money than he does.«/p» 


STEF|WORKS AS THE CORPORATE SALES MANAGER. HE. RUNS MOST OF 
THE MARKETING EFFORTS WITHIN THE FIRM AND SELLS THINGS 


If the user clicks the element, a MONK. $0 GEST GET VERY FAR WETH THEN HE SUCKS AT QUARE. 
Й ALTHOUGH HE ADMIRES THE POWER OF MICROSOFT'S MARKETING 
cursor will appear, and they can MUSCLE, HE HAS A REAL PROBLEM WITH MICROSOFT SALESMEN, 


start typing. 


PROBABLY BECAUSE THEY MAKE MLICH MORE MONEY THAN HE DOES. 
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Any text the user types 15 added to те 
the document. This requires no порваны е ; 
scripting on your part — the STEF 

browser does all the work. STEF (SOMETIMES]WORKS AS THE CORPORATE SALES MANAGER HE 


RUNS MOST OF THE MARKETING EFFORTS WITHIN THE ЕТЕМ AND 
SELLS THINGS BEFORE THEY EXIST, HE CANT UNDERSTAND THE WAY 
TECHIES THINK. SO DOESNT GET VERY FAR WITH THEM HE SUCKS AT 
QUAKE. ALTHOUGH HE ADMIRES THE POWER OF MICROSOFT'S 
MARKETING MUSCLE HE HAS A REAL PROBLEM WITH MICROSOFT 
SALESMEN. PROBABLY BECAUSE THEY MAKE MUCH MORE MONEY THAN 
HE DOES. 


© k 


To make multiple elements editable, you can apply the contenteditable 
attribute to the parent, and the child elements will inherit the setting: 


«section contenteditable-"true"» jl EI 
Bie Edt View History Bookmarks Tools Help 
<h1>Stef</h1> @ Content ediable 2 i Y 
<p>Stef works... EDITABLE: STEF 
EDITABLE: STEF WORKS AS THE CORPORATE SALES MANAGER. HE RUNS 
--.than he does -</p> MOST OF THE MARKETING EFFORTS WITHIN THE FIRM AND SELLS THINGS 
: BEFORE THEY EXIST. HE CANT UNDERSTAND THE WAY TECHIES THINK. SO 
«img DOESNT GET VERY FAR WITH THEM HE SUCKS AT QUAKE. ALTHOUGH HE 
5 wey ADMIRES THE POWER OF MICROSOFT'S MARKET ING MUSCLE. HE HAS A REAL 
src="headshots/stef.gif PROBLEM WITH MICROSOFT SALESMEN PROBABLY BECAUSE THEY MAKE 
alt="Stef"> MUCH MORE MONEY THAN HE DOES. 
</section> © 


In the previous example, both the <h1> and the <p> elements are edit- 
able. So is the <img> element, but your only option is deletion —you 
can't edit the image from within the browser with the contenteditable 
API. It may be possible to build your own image editor using the 
«canvas» element (see chapter 3), but we don’t have room to get into 
that here. 


You can override the contenteditable value on a parent element by 
explicitly setting contenteditable on a child element: 
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«section contenteditable-"true"» (en шшш 
А Die Edt View History Bookmarks Dols Мер 
«hl contenteditable="false"> 9 Cote estable 2 ie x. 
The Chief 
«/h1» THE CHIEF 
<p>The Chief is... FEARLESS LEADER FOR TIE TECHIES AD SALESPEOPLE. AS WELL AS THE 
ONLY CALM CLEAR-THINKING HEAD IN THE COMPANY. НЕ WOULUNT BE IF 
E .meaningless : «/p» HE KNEW WHAT WAS REALLY GOING ON. THE CHIEF 15 ALSO A CLOSET 
| GUITAR PLAYER HAVING SPENT YEARS MASTERING THE ART OF PERFECT 
<im TONE. ONLY TO HAVE COMPUTERS COME ALONG AND RENDER ALL OF HIS 
g EFFORT MEANINGLESS, 
src="headshots/thechief.gif" © 
alt="The Chief"> 
</section> 


In this example, the <h1> element isn’t 
editable, but every other child ele- 


ment of the <section> element 15. 


NOTE THAT IE8 DOESN'T TREAT contenteditable AS INHERITABLE. 
YOU'LL NEED TO SPECIFY contenteditable="true" ON EVERY 
ELEMENT YOU WANT TO BE EDITABLE IN IE. eL 


USER FRIENDLY by Illiad 


WHY CONTENTEDITABLE? I CAN 
JUST FIRE UP VIM AND HAVE AT IT. 


IT'S ALL ABOUT DEMOCRATIC 
PUBLICATION. 
BY "DEMOCRATIC 
PUBLICATION" DO YOU MEAN 


NOT EVERYONE CAN COPE 


The spellcheck attribute 


A common feature of word processors is inline spell-checking — spell- 


ing mistakes are highlighted by a red squiggle. This feature is also 
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available in contenteditable sections. To indicate to the browser that 
text should be spell-checked, set the spellcheck attribute to true: 


<section 
contenteditable="true" 
spellcheck-"true"» 
<hi>The СһіеҒ</һ1> 


«p»The Chief is Columbia... 


...effort meaningless.«/p» 


Content editable 3 
м @ (O fieimomeroberidocuments/writinghello-htmis-css3/ Yr| Е A 


THE CHEIF 


THE CHETF 15 COLUMBIA INTERNET'S СЕО. HE IS THE FEARLESS LEADER 
FOR THE TECHIES ANP SALESPEOPLE, AS WELL AS THE ONLY CALM CLEAR: 
THINKING HEAD IN THE COMPANY. HE WOULDNT BE IF HE KNEW WHAT WAS 
REALLY GOING ON THE CHIEF 15 ALSO A CLOSET GUITAR PLAYER. 
HAVING SPENT YEARS MASTERING THE ART OF PERFECT ТОМЕ ONLY TO 
HAVE COMPUTERS COME ALONG AND RENDER ALL OF HIS EFFORT 
MEANINGLESS, 


You can also recommend that browsers not spell-check text by setting 
the attribute to false. This might be useful if the user was expected to 


enter things like codes or part numbers: 


<section 
contenteditable="true" 
spellcheck="false"> 
<h1>Stef</h1> 
<p>Stef works as the... 
...than he does.</p> 


Content editable 3 


= к ё [O fite-/jmome/robert/documents/writingimello-htmiS-css3/ fy) 1 A 


STEFFFFF 


STEFFFFF WORKS AS THE CORPORATE SALES MANAGER. HE RLNS MOST OF 
THE MARKET ING EFFORTS WITHIN THE FIRM AND SELLS THINGS BEFORE 
THEY EXIST. HE CANT UNDERSTAND THE WAY TECHIES THINK. SO 


R 


DOESNT GET VERY FAR WITH THEM HE SUCKS AT QUAKE ALTHOUGH HE 
ADMIRES THE POWER OF MICROSOFT'S MARKET ING MUSCLE. HE HAS A 
REAL PROBLEM WITH MICROSOFT SALESMEN PROBABLY BECALISE THEY 
MAKE MUCH MORE MONEY THAN HE DOES. 


Note that, in both cases, the value of the spellcheck attribute is inher- 
ited by the child elements. You can override it by specifying it on par- 


ticular elements. 
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The spellcheck attribute is just 
a suggestion; user preferences 
are allowed to override every- 
thing. If you look at the previ- 
ous example in Firefox, you'll 
see that the spellcheck is 
active even though the attri- 
bute is set to false. 


Saving the edited content 


Content editable 3 Minenl d 
Ble Edit View History Bookmarks ols Help 


© Content editable 3 i? е 


STEF 


STEF WORKS AS THE CORPORATE SALES MANAGER HE RUNS MOST OF THE | 
MARKETING EFFORTS WITHIN THE FIRM AND SELLS THINGS BEFORE THEY 
EXIST. HE CANT UNDERSTAND THE WAY TECHIES THINK, SO DOESNT GET 
VERY FAR WITH THEM HE SUCKS AT QUAKE. ALTHOUGH HE ADMIRES THE 
POWER OF MICROSOFT'S MARKETING MUSCLE. HE HAS A REAL PROBLEM 
WITH MICROSOFT SALESMEN PROBABLY BECAUSE THEY MAKE MUCH MORE 
MONEY THAN HE DOES. 


The contenteditable attribute only lets you edit the content in the page; it 
doesn't change the file stored on a web server. Although you could save the file 
locally to preserve the changes, to make this work as part of a content-manage- 
ment system (CMS) you would need to use JavaScript to get the results back to 


the server. 


USER FRIENDLY by J.D. "Шаа" Frazer 
I NEED TO BE ABLE TO EDIT THE 


COPTRIGHT © 2009 J.O. “Ийэ” Frazer MTTP.//WWWUSERIRICNOLY.ORG/ 


I DON'T WANT TO MESS AROUND YOU KNOW A CHILD WHO CAN HELP 
WITH ALL THAT CODE STUFF! MAKE YOU WITH THE EDITING, THEN? 
IT LIKE WORD, SO EASY EVEN A 


So far, we've only looked at what's achievable without JavaScript. For 


more advanced formatting, like setting text to bold or italic, or adding 


links, you have to start taking advantage of the API, as we'll discuss in 


the next section. 
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Applying formatting to the editable text 


9 


The HTML5 API provides the execCommandO function for manipulating 
text in the contenteditable region. The function has three parameters — 


one required, one ignored, and one optional. 


AN OPTIONAL STRING VALUE USED 


А STRING INDICATING THE AS A PARAMETER FOR THE COMMAND 
OPERATION TO PERFORM 


execCommand (comnandName, showDefaultUI, commandArgument) 


A BOOLEAN PARAMETER |J 
THAT WILL BE IGNORED 


LET'S EXTEND THE PREVIOUS EXAMPLE BY ALLOWING THE USER TO APPLY 
FORMATTING TO THE TEXT THEY'RE EDITING. YOU'LL ADD BUTTONS TO THE PAGE THAT 
EXECUTE COMMANDS ON THE API WHEN CLICKED. 


\ 


The commands for applying bold, italic, and underlined text are all 
fairly straightforward. Each requires the command name; all the other 
parameters can be left in their default state. 


Here’s the command for bold: 


execCommand ( 
'bold',false,'' 
23; 


If you add this code to the onclick attribute of a button, the formatting 
will be applied to the currently selected text when the button is clicked. 
Here are the equivalent commands for italic and underlined text: 


execCommand ( 
'italic',false,'' 

2; 

execCommand C 
'underline',false,'' 

2; 


The following screenshots show the process of applying these three dif- 
ferent commands to selected text on the example page. 
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STEF STEF 
ШЇЇ WORKS лз THE CORPORATE SALES PANAGER ME RNG MOST OF THE ‘TEE 77 AS THE CORPORATE SALES MANAGER HE RUNG MOST OF THE {TEE NORIS AS THE GOSPOSATE SALES MANAGER ME RAG NOST OF THE 
PARKET DAD EFFORTS тим THE FIRM AND SELLS TNINGS BEFORE THEY PAKET DD EFFORTS WITHIN THE FER AND SELLS THINGS BEFORE THEY MARKET Duo EFFORTS аттам THE FER AMD SELLS THINGS BEFORE THEY 


SALIESEN, PROBABLY BILLALEIL THEY MAKE. MUCH MORE MONEY 


ALTHOUGH SUPPORT FOR THE execCommand() METHOD IS CONSISTENT 
CROSS-BROWSER, THE IMPLEMENTATION OF THE INDIVIDUAL COMMANDS 
STILL VARIES CONSIDERABLY. FOLLOWING IS THE MARKUP GENERATED 
BY FOLLOWING THE PREVIOUS THREE STEPS IN CHROME AND OPERA ON 
THE LEFT, ТЕ ON THE RIGHT, AND FIREFOX IN THE MIDDLE. 


Chrome and Opera use 


band i, so your styles 


apply. 


MIZROSOFT 
TIAE DOES. 


Firefox inserts span 
elements with styles. 


IE inserts strong and 


em elements. 


«span style=" <strong> 
<b> font-weight: bold;"> Stef 
Stef Stef </strong> 
</b> </span> <em> 
<i> <span style=" works 
works font-style: italic;"> </em> as the 
</i> as the works <u> 
<u> </span> as the Corporate Sales 
Corporate Sales <span styles" Manager 
Manager text-decoration: «/u». 
</u>. underline; "> 
Corporate Sales 
Manager 
</span>. 
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YOU CAN MAKE FIREFOX USE THE SAME MARKUP AS CHROME AND OPERA WITH THE 
styleWithCSS COMMAND: 


execCommand('styleWithCSS', false, false); 


Support for more advanced formatting commands tends to be some- 
what flaky cross browsers. Nevertheless, these commands can be use- 
ful, so we'll look at some of them. 


The formatblock command allows 


Бе Et Мен May Bookmarks Вон Help 
you to wrap the current block in a 7—77 : 
new element: 
STEF 
execCommand ( этек WORKS A5 THE 
"formatbLlock', false, '<h1>' 
) CORPORATE SALES MANAGER 
d ME RUNS MOST OF THE MARKETING EFFORTS WITHIN THE FIRM AND SELLS THINGS 
BEFORE THEY EXIST. ME CANT UNDERSTAND THE WAY TECHIES THINK SO DOESNT GET 
VERY FAR WITH THEM HE SUCKS AT QUAKE. ALTHOUGH HE ADMIRES THE POWER OF 
The current block refers to the block- MICROSOFT'S MARKET ING MUSCLE. ME WAS A REAL PROBLEM WITH MICROSOFT 
SALESMEN PROBABLY BECAUSE THEY MAKE MUCH MORE MONEY THAN ME DOES. 
level parent of the current insertion AEN 


point. If you’re focused on a 
<paragraph> element, that element 
will be converted to the type of 
element you specify in the argument. 


AS EVER, WATCH OUT FOR BROWSER INCONSISTENCIES. FIREFOX REPLACES 

THE CURRENT BLOCK ELEMENT, SO A <p> BECOMES AN <h1> IN THE PREVIOUS 

EXAMPLE. IE, CHROME, AND OPERA WRAP THE OLD ELEMENT AROUND THE NEW 
МА ONE, SO THE <p> ENDS ИР CONTAINING АМ <һ1>. 


Only a limited number of elements can be passed in the argument for 
formatblock: IE allows <h1>-6, address, and pre. If you want to have more 
control over the exact markup inserted, you can use the inserthtml 
command. This means you have to deal with the currently selected text 
yourself. Use the HTMLS text-selection API to get the content of the 
user's current selection: 
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var selection = 
window. getSelectionQ ; 
var range = 
selection.getRangeAt(0); var 
contents = 
range.extractContents() ; 


We're not going to cover the text- 
selection API in detail here. If you 
want to find out more, check out 
the specs. 


Now you can insert the selection 
back into the document inside a 
<section> element. The current 
selection is replaced with the new 
content: 


execCommand ( 
'inserthtml',false, 
'«section»' + 
contents.textContent + 
'«/section»'); 


Content editable у Minefield 


Die Edt View Ногу Bookmarks Jools Нер 
119 Content еме 5 i$ ~ 


воа | [malic | "undertine || Heading ) | Seqion | [Link 


| STEF 


STEF WORKS AS THE 


| CORPORATE SALES MANAGER 


HE RUNS MOST OF THE MARKETING EFFORTS WITHIN THE FIRM AND SELLS THINGS 


EN. PROBABLY BECAUSE emarian rapsai eidar 


Content editable 5 MineNeld 


Bod || matic || Underiee || Heading j| Seqpon || Link 


STEF 


STEF WORKS AS THE 


CORPORATE SALES MANAGER 


МЕ RUNS MOST OF THE MARKET ING EFFORTS WITHIN THE FIRM AND SELLS THINGS 
BEFORE THEY EXIST. 


МЕ CANT UNDERSTAND THE WAY TECHIES THINK SO DOESNT GET VERY FAR WITH THEM 
WE SUCKS AT QUAKE. ALTHOUGH HE ADMIRES THE POWER OF MICROSOFT'S MARKETING 
MUSCLE. HE HAS A REAL PROBLEM WITH MICROSOFT SALESMEN PROBABLY BECAUSE THEY 
MAKE MUCH MORE MONEY THAN HE DOES. 


Finally, a common requirement when editing web pages is inserting 
links. The command for this is CreateLink, but you also need to provide 
the user with a way of entering the link as well as the button to apply it: 


if C P "Content editable 5 - Minefield 
Die Edt View History Bookmarks pois Нер 
document сизо оез le T 
.getElementById('theURL') 7 — Man RR 
.CheckValidity( STEF 

) 1 STEF WORKS AS THE 

execCommand ( CORPORATE SALES MANAGER 
"CreateLink', 


ME RUNS MOST OF THE MARKET ING EFFORTS WITHIN THE FIRM AND SELLS THINGS 
BEFORE THEY EXIST. 


false, document 
.getElementById('theURL') 


.value | NKE MUCH HORE MONEY тин нЕ DOES, 


); 


peperere pere ЭО POINT SET EEY I EITEN. 
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Notice that for this example, rather than writing your own code to val- 
idate the email address, you take advantage of the HTML5 form-valida- 
tion API (see chapter 2 for more details). 


USER FRIENDLY by J.D. "Шаа" Frazer 


STEF LOOKS EVEN MORE SELF 
SATISFIED THAN USUAL. IS THERE 
ANYTHING I SHOULD BE WORRIED 
ABOUT? 


AJ'S FIXED THINGS UP 


I'VE USED HTMLS TO MAKE I'M PRETTY SURE OUR INTERNET 
A WYSIWYG EDITOR IT'S SERVICES DON'T INVOLVE THAT 
REALLY SWEET/ MANY SCANTILY CLAD WOMEN. 


FOR STEF? ARE 
YOU SURE THAT'S A 


A BIG FEATURE OF DESKTOP APPLICATIONS IS THE ABILITY TO DRAG AND 
DROP-BLOCKS OF TEXT, IMAGES, AND FILES. WE'VE BECOME USED TO BEING 
ABLE TO SELECT WHAT WE WANT WITH THE MOLISE, DRAG IT WHERE WE WANT 
IT TO BE, AND DROP IT. IN THE NEXT SECTION, WE'LL LOOK AT THE HTMLS 
АРТ THAT BRINGS DRAG-AND-DROP TO WEB APPLICATIONS. 


Natural user interaction with drag-and-drop 


Browser support quick check: 


drag-and-drop 


Standard | Custom 
ЕЕ 
e 
e 9.0 6.0 
e^" 


Drag-and-drop is a metaphor familiar on 
your desktop computers —you've probably 
used it for sorting files into folders, adding 
attachments to emails, and opening a file in a 
particular program. It’s therefore useful when 
writing web applications to support this drag- 
and-drop metaphor both within your applica- 
tion and as an interaction method with other 
content on the user's computer. This function- 
ality is provided in HTMLS in the drag-and- 
drop API. 
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THE DRAG-AND-DROP API WAS ORIGINALLY DEVELOPED BY MICROSOFT 
IN IES.S. RATHER THAN INVENT AN INCOMPATIBLE API, THE WHATWG 
DECIDED TO EXHAUSTIVELY DOCLIMENT WHAT ТЕ HAD IMPLEMENTED. 
THIS HAS THE ADVANTAGE THAT THE STANDARD MOSTLY WORKS IN ТЕ, 
BUT THE DISADVANTAGE THAT THE API IS SOMEWHAT MORE ^ 
COUNTERINTUITIVE THAN MOST OTHER APIS IN THE HTMLS SPEC. 


The drag-and-drop API makes use of a few properties and a lot of 
events. The following sequence of diagrams gives you an overview of 
which events fire when before we dive into code in the following 
section. 


TO PERFORM DRAG AND DROP IN AN HTMLS PAGE, YOU NEED AT 
LEAST TWO ELEMENTS: ONE TO BE THE ELEMENT TO BE DRAGGED 
А e T d AND ONE TO BE THE DROP TARGET. 


draggable- 


true 


ondragover= 


"Return false;" 


ELEMENT TO DRAG 
NEEDS TO HAVE THE 
draggable ATTRIBUTE 
SET TO true. 


ELEMENT TO ACCEPT DROP 
NEEDS TO RETURN false TO 
THE ondragover EVENT. 
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WHEN THE USER CLICKS THE ELEMENT AND STARTS DRAGGING IT, 
THE dragstart EVENT IS FIRED. AS THE ELEMENT IS DRAGGED 


ey OVER THE TARGET. THE TARGET FIRES SEVERAL EVENTS, AS SHOWN HERE. 
Q P di 
LZ 
AN AS THE DRAGGED ELEMENT ENTERS THE TARGET, THE 


ondragenter EVENT IS FIRED, ALLOWING YOU TO 
PROVIDE USER FEEDBACK OR SET STYLES. 


THE ondragstart 


EVENT ALLOWS : 
YOu TO SET ~> ondragstart Y 
PARAMETERS ON 1 $ 
THE DRAG OBJECT. Н E. 
: N ondragenter 
: 9 ~ Ondragover 
! : ondragover 
тсз ана шел! ondragover 
А. 
AS THE ELEMENT IS DRAGGED OVER 
THE TARGET, THE ondragover 
EVENT IS FIRED REPEATEDLY. 
FINALLY, WHEN THE USER RELEASES THE MOUSE BUTTON OVER THE 
DROP AREA, THE ondrop EVENT IS FIRED, THIS IS YOUR OPPORTUNITY 
e TO READ THE DATA SET IN THE ondragstart EVENT AND PERFORM 
` _— APPROPRIATE ACTIONS. 
" i 
THE DRAGGED Lb иннаа МЫ АЕ eect 
ELEMENT REMAINS 
IN THE DOM WHILE 
BEING DRAGGED. 


A COMMON TASK FOR 
THE ondrop EVENT 
IS TO REMOVE THE 
DRAGGED ELEMENT 
FROM THE DOM AND 
RE-INSERT IT AS А 
CHILD OF THE TARGET 
ELEMENT. 


Now that you have an overview, let’s examine the details. 
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Basic drag-and-drop 
To make an element draggable is simple, with a couple of browser 
compatibility caveats that we'll get to later: add a draggable attribute 
with value true. This first example, ch05/drag-and-drop-1.html, has а 
list of locations in the Columbia Internet offices that you'll make 


draggable: 


«ul id="Locations"> - 
«li draggable-"true" Бе Би МИ ee 
* rag anc example 1 > м 
id-"recpt" -— 


ondragstart="drag(event) "> 


‘Drag and Drop example 1 MineNeld 


COLUMBIA INTERNET LOCATIONS 


* RECEPTION 


. * SERVER ROOM 
Reception * SIDS OFFICE 
. © FINANCE OFFICE 
</li> © SUPPORT CESK 
ITEMS SELECTED 


</ul> 


On each of the elements, the ondragstart attribute has been set. This 
function is used to set the data that will be passed by the drag-and-drop 
action. For now, you'll set the text data as the ID of the element: 


function drag(event) { e RECEPTION 


event.dataTransfer . pointes 
' ' e SIDS OFFICE 
.setData('Text', e FD OFFICE 


event.target.id); e SUPPORT DESK 
log(C'drag ' + event.target.id); © SUPRIBRT DESK 
} ITEMS SELECTED 


Within the function there's also a 10g 
DRAG SUPPORT 

command so the sequence of events 

firing is recorded on the page. As the 

element with ID 'support' is 


dragged, the messages are added at 
the bottom of the page. 
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The crucial event in the drag-and-drop process is dragover. Any ele- 
ment that is to be a target for dropped elements must capture the 
dragOver event and cancel the default action on it: 


function dragOver(event) { 
event.preventDefaultO; 
log(C'dragOver ' + event.target.id); 
} 


When the element is dropped, the drop event is fired. It’s in this event 
that the actual work needs to be done. This example removes the list 
item from the source list and adds it to the selected list using the stan- 
dard appendChild method: 


function drop(event) { 
var id = event.dataTransfer.getData('Text'); 
event.target.appendChild(document.getElementById(id)); 


log('drop ' + event.target.id); 
event.preventDefaultO; 
} 
These two events can be bound declara- ITEMS SELECTED 
tively to the drop target element: * SUPPORT DESK 
Т " DRAG SUPPORT 
ondragover="dragOver (event) DRAGOVER DROPHERE. 
</ul> DRAGOVER DROPHERE. 
qon " DRAGOVER DROPHERE 
«ul id="drophere DRAGOVER DROPHERE 
ondrop="drop (event) "> DRAGOVER DROPHERE 
DRAGOVER DROPHERE 
à DRAGOVER DROPHERE 
As you Can see, the dragOver event 15 DRAGOVER DROPHERE 
fired repeatedly while the dragged ele- stp E 
ment is over the drop target. PROF DROPIERE. 


If you only want drag-and-drop to work in Firefox, Chrome, and 
Safari, that's all the code you need —you're done! If you want it to 
work in IE too, read ahead to the next section. 
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Drag-and-drop in all browsers 


тхо тт oo 


Although the НТМІ5 drag-and-drop API is based on what IE5.5 imple- 
mented, it’s not identical. What that means is that although it’s possible 
to write cross-browser code for drag-and-drop that works across 
Firefox, Chrome/Safari, and IE, doing so isn’t as straightforward as the 
code given in the previous section. 


PROBLEM 1 


The draggable attribute is an innovation of the HTML5 spec, and IE8 
doesn’t recognize it. By default, nothing in the previous example is 


draggable in IE. 


SOLUTION 1 


Links are draggable by default, so by making everything that should be 
draggable a link, IE can be supported. 


The initial code was simple —a 
draggable attribute and an event 


handler: 


«li draggable="true" 
id-"recpt" 
ondragstart- 

"dragstart(event)"» 
Reception 
«/li» 


Instead of making the list items 
draggable, add links around the 
text content: 
«li id="recpt"> 

«a ondragstart- 


"dragstart(event);" 
href="#" 
onclick="return false;"> 
Reception 
</a> 
</li> 


The draggable attribute is no lon- 
ger required because links are 


draggable by default. 
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The original dragstart event 
handler assumed that it was the 
<li>, with the id, that was drag- 
gable: 


function dragstart(ev) { 
event.dataTransfer 
.setData('Text', 
event.target.id); 


log(C'drag ' + 
event.target.id); 
} 

PROBLEM 2 


Now the link element is used as 
a proxy. The element you want 
to move is the parent of the one 


being dragged: 


function dragstart(ev) { 
event.dataTransfer 
.setData('Text', 
event.srcElement 
.parentNode.id); 
log(C'drag ' + 
event.srcElement 
.parentNode.id); 


Older versions of IE use srcElement instead of target. 


SOLUTION 2 


Do the standard IE support bait-and-switch. 


The original code uses standard 
DOM events, methods, and 


properties: 


function dragstart(ev) { 
event.dataTransfer 
.setData('Text', 
event.srcElement 
.parentNode.id); 
log(C'drag ' + 
event.srcElement 
.parentNode.id); 


This isa fairly common problem 
in writing cross browser Java- 
Script. Test for the existence of 


event.target: 


function dragstart(ev) 1 
var target - 
event.target ? 
event.target : 
event.srcElement; 
event.dataTransfer 
.setData('Text', 
target.parentNode.id); 
log(C'drag ' + 
target.parentNode. 1а) ; 
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PROBLEM 5 


The ondragover attribute doesn't work in IE8 and before. 


SOLUTION 3 

There are two possible approaches to solving this problem. The first 
approach is to handle the dragenter event, which older versions of ТЕ 
recognize, instead of the dragover event, which they do not. 


If you don't need to support old In older versions of IE the 
versions of IE, you don't need to dragenter event has to be can- 
worry about the first approach, celled instead of the dragover: 


although it's simple to fix: <ul id="drophere" 


<ul id="drophere" ondrop="drop(event)" 
ondrop="drop(event)" ondragover="dragOver (event)" 
ondragenter= 
ondragover="dragOver (event) "> "dragOver (event) "> 


Aman > 


Also note that IE8 and earlier 
need the dragOver event to 


return false;. 


The second (and better) approach is to attach the event handler in 
script rather than declaratively in the HTML markup. The advantage 
of this approach is that, while attaching the handler declaratively will 
cause the event to fire, canceling that event won't make the element a 
drop target in IE8 and earlier. But if you use the proprietary attach- 
Event() method to attach to the dragOver event in script, canceling that 
will make the element a drop target. Attaching the event this way is 
straightforward; the code is shown here: 


«I--[if lte IE 8]> 

«script» 

document.getElementById(C 
'drophere' 

).attachEvent( 
'ondragover', dragover 

2; 

</script> 

<! [endif]--» 
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Note that for advanced developers the best practice is to always attach 


event handlers in script. For now, this snippet can be copied and 


pasted into your own code. 


PROBLEM 4 


Chrome is now broken! 


SOLUTION 4 
Find the closest parent ID. 


This is a strange one. Now that 
the draggable item is an anchor 
rather than a list item, Chrome 
inserts an extra element — the 
parentNode no longer has an ID, 
so this code doesn't work: 


target.parentNode.id 


Now take every place in the 
code where the ID is needed, like 
this 

event.dataTransfer 


.setData('Text', 
target.parentNode.id); 


The solution is to write a utility 
function to recurse up the docu- 


ment tree until an element with 
an ID 1s found: 


function grabOuterId(el) { 


if Cel.id) 1 
return el.id; 
) else 1 
return 


grabOuterId(el.parentNode) 
} 


And replace it with a call to the 


new function: 


event.dataTransfer 
.setData('Text', 
grabOuterId(target) 
E 


Aman > 


You can avoid this issue altogether if the elements you want to drag are 


links or images—add the ID directly to those draggable elements. An 


alternative approach for IE support on elements that aren’t draggable 


by default is to add the links dynamically with script only in IE. 
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DRAG-AND-DROP IS A GREAT WAY FOR USERS TO INTERACT WITH YOUR WEB 
APPLICATIONS. BUT THE USABILITY GAINS WILL BE LOST IF, AFTER SPENDING TIME 
MOVING THROUGH YOUR APPLICATION, USERS CLICK THE BACK BUTTON EXPECTING NN 
TO GO BACK A PAGE AND INSTEAD GO BACK TO THEIR START SCREEN. IN THE NEXT 
SECTION, YOU'LL LEARN HOW TO USE THE HTMLS HISTORY API TO AVOID THAT FATE. 


Managing the Back button with the history API 


One major issue with JavaScript-based 


popState | hashchange . . i 
applications is that they break the Back 


a 

< 

Э е 5.0 5.0 button. If you update content on the page 
2 with JavaScript rather than loading a new 
$ е 40 36 page from the server, no entry made is in 
5 the browser history; so when the user 
з e ү aD clicks Back, expecting to go back to the 
t previous state, they end up at the previous 
a О 115 10.6 site instead. 

[7] 

o 

z 

5 Ө 5.0 5.0 

d 


The problem can be demonstrated simply. All you need is a function 
that updates the page in response to user activity 


var times - 0; 
function doclickd) { 
times++; 
document.getElementById('message').innerHTML = 
"Recorded <b>' + times + '</b> clicks'; 


} 
and a little markup: 


<div onclick="doclickQ ;">Click Me</div> 
<div id="message">Recorded «b»0«/b» clicks</div> 


In real life, your web page would be doing something more compli- 
cated, like fetching new content from the server via AJAX, but a simple 
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update is enough to demonstrate the concept. Let’s see what happens 
when the user visits the page. 


The user starts on their home | @ Mozilla Firefox Start Page | + | 
page and decides to visit the [@ about:home 


amazing Click Me application 


they've heard about. ёз; 


They type in the URL ог fol- [D Location Hash 1 | + | 


low a link from an email to get $ [D »de/cho6/location-hash-1.html 


to the Click Me page. 
CLICK ME 
RECORDED O CLICKS 


able interaction, the page state { [Г »de/cho6/location-hash-1.html 


has changed several times. 


But when the user clicks the |@ Mozilla Firefox Start Page T 


3 After a few seconds of enjoy- | Lj Location Hash 1 | + | 


Back button in the browser, k 9? |@ about:home 


they find that instead of going 
back to a previous page state, 
they leap to their home page. 


The doclick() function can be updated to take advantage of the history 


API. Each time the page is updated it will also set the location. hash: 


function doclick(O) + 
times++; 
location.hash = times; 
document. getElementById('message').innerHTML = 
"Recorded <b>' + times + '«/b» clicks'; 
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The user arrives at the Click 
Me page as before. 


Notice that now the URL is 
updated after every click — 
“#3” has appeared at the end 
of it. 


Clicking the Back button now 
takes the location back to #2, 
demonstrating that page states 
have successfully been added 
to the history. But note that 
clicking the Back button 
doesn’t automatically return 
the page to its previous state. 


Updating page state 


Location Hash 2 [Ф | 


| [3 »de/ch06/location-hash-2.html 


CLICK ME 
RECORDED O CLICKS 


Location Hash 2 [+| 


| (>) ycho6/location-hash-2.htmi#3 


CLICK 
RECORDED 3 CLICKS 
Location Hash 2 | +. 
k | ) /ch06/location-hash-2.htmi#2 
CLICK ME 
RECORDED 3 CLICKS 


Updating the history is only part of the problem; you also need to be 


able to update the state of the page to match the state in the history. 


Because you're the one managing the history, it's up to you to manage 


the page state. In order to update your page in response to 


location.hash being changed, you can listen to the hashchange event: 


function doclick() { 


j 


times++; 
location.hash = times; 


window. onhashchange = function) { 


if Clocation.hash.length > 0) { 
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“> UPDATE TIMES; 
CHANGE HASH 


HASHCHANGE. 
EVENT 


К CHECK THAT 
times = HASH EXISTS 
parseInt(location.hash.replace('£',''),10); 
^o SET TIMES 
} else ( VALUE 
times = 0; 
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} 
document.getElementById('message').innerHTML = E 


"Recorded <b>' + times + '«/b» clicks'; UPDATE PAGE 


STATE 
} 


The doclickO function @ is now only responsible for updating the 
times variable and changing the hash. The hashchange event @ is on the 
window object; when it takes place, you check that the hash exists Ө. In 
a real application, you’d also want to check that it had a valid value. 
Next, you set the value of times to be the number in the hash @. 
Finally, you update the document to reflect the correct page state Ө. 


Let’s look at this new code: 


As before, the hash in the [Г Location Hash з [e] 
1 URL is updated as the user 4 [5 ych06/location-hash-3.html#3 
clicks. 
CLKCK ME 
RECORDED 3 CLICKS 
But now, when the Back but- [Г Location Hash 3 T3 
2 ton is clicked, the onhashchange № -» [C ycho6/location-hash-3.htmi#2 
function is triggered and the 
page state 15 reset to match E 2 CLICKS 


the URL. 


Using location.hash 


The location. hash property and the associated hashchange event are use- 
ful if you want to tag particular views of your application and allow the 
user to navigate between them. Google Mail uses this approach by 
allowing you to navigate between your inbox (#inbox), contacts 
(#contacts), and other views —if you have а Gmail account, look at 


what happens to the URL as you navigate to various different pages 
and then click back. 


But as far as state information goes, the hash only lets you store a 
string. You could encode a more complex object, but the URL would 
quickly become long and unwieldy and wouldn't be memorable for 
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your users. If you need more complex information stored as part of the 


history, a better approach would be to use the hash as a key to pull fur- 


ther state information out of some store. Although you could roll your 
own approach to this, HTMLS5 has provided an API to do it for you 
through the history.pushState() method and the popstate event. These 
methods allow you to save and reload a complex object. 


Example: Implementing an undo feature 


The next example extends the content-editable example ch05/content- 


editable-5.html from the earlier section to include an undo feature. You 


can see the full listing in ch05/history-1.html. Here's how it works. 


1 


When the page is first loaded, 
an initial state is created and 
tagged in the URL with the 
hash undoo. 


If the user makes a change in 
the text and then clicks the 
Save button, a new undo 
state is created and assigned 
to the hash undo1. 


Clicking the Undo button or 
clicking the Back button in 
the browser returns the page 
to the previous state. 
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Bold Italic Underline Heading 
Link || 
Save || Undo 


STEF 
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| L3 3/history-1.htmi#undol ме) Е 


Bold Italic || Underline || Heading 
Link || | 
Save Undo 


STEF 


STEF WORKS AS THE MARKET ING MASTER HE RUN: 
MARKET ING EFFORTS WITHIN THE FIRM AND SELL 


[2 S/history-1.htmi#undoo ме) [+ 


Bold Italic Underline Heading 
Link || 
Save Ungo 
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STEF WORKS AS THE CORPORATE SALES MANAGER 
OF THE MARKET ING EFFORTS WITHIN THE FIRM A 


178 


CHAPTER 5 Browser-based AFls 


Now let’s look at the implementation. 


A. DECLARE A VARIABLE TO HOLD THE STATE 
You start by declaring a global variable to hold your state: 


var state; 


B. CREATE THE INITIAL STATE 


Now you need to set initial values of your state object. For this exam- 
ple, you need a property to hold a reference you can use in the hash, 
and the content of your editable region: 


function init() 1 
state = { 
undonum: 0, 
content: document.getElementById('content').innerHTML 
}; 
} 


С. SAVE THE STATE WITH PUSHSTATE 


When the user saves, that state needs to be updated and then pushed 
into the history object: 


function save() { 
state.undonum++; 
state.content = document.getElementById('content').innerHTML; 
history.pushState(state, '', '#undo' + state.undonum) ; 


} 


The pushState function takes three parameters: the object to be stored 
as the state, a title for the state, and a hash to reference the state. Note 
that the title is advisory only; currently most browsers ignore it. The 
hash will be updated automatically by calling pushState. 


D. WRITE A FUNCTION FOR THE POPSTATE EVENT 


You also need a function to restore the state: it will be an event handler 
for the popState event. The state object is available on the event passed 
in, so you grab that and update the page from the content property: 


function popState(event) { 
if Cevent.state) { 
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state = event.state; 

document.getElementById('content').innerHTML = state.content; 
} else { 

history.replaceState(state, '', '#undo' + state.undonum) ; 


} 


Е. HANDLE THE INITIAL STATE, AND ATTACH THE EVENT HANDLER 


If there isn’t a state object on the event, then this is the first load; 
replace the current state with your initial state object. Now all that’s 
needed is to wire up the events: 

window.onload = init; 


window.onpopstate = popState; 
window. onpageshow = popState; 


Both onpopstate and onpageshow are required because Firefox, unlike 
other browsers, doesn’t fire popstate on the initial page load when no 
state is set. 


F. SET UP THE MENU BUTTONS 
Finally, link the buttons on the menu to appropriate functions: 


«button onclick="save() ;">Save</button> 
«button onclick="history.go(-1) ;">Undo</button> 


THE HTMLS HISTORY API PRESENTS A POWERFUL 
TOOL FOR JAVASCRIPT-BASED APPLICATIONS AND 
L^ HAS GOOD CROSS-BROWSER SUPPORT. IT'S ALREADY Standard 
USED ON MAJOR WEBSITES SUCH AS GOOGLE MAIL 
AND TWITTER. IN THE NEXT SECTION, WE'LL LOOK 
AT HOW YOU CAN USE CONTENT THAT'S BEEN 
SEMANTICALLY ENHANCED WITH MICRODATA. 


а 16 
. . . . « 
Getting semantic with the microdata АР! s 
The microdata API makes it convenient to E 
examine and update content that's been marked E 

12 


up with microdata. Microdata was discussed in 


Browser support quick check: 


ecoe 


chapter 1; it's a method of flexibly extending the 
semantics of HTML to describe more than just 


text content — for example, contact information, 
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appointments, and licenses. In this section, we'll look at how to use the 


microdata API and then consider some useful applications. 


So far, only Opera has implemented this API, although a Firefox 


implementation is in progress. 


Using a single microdata format 


Here’s a simple example of contact information marked up with micro- 


data using the hCard vocabulary. This code, along with the script that 


follows, is available in ch05/microdata-api-1.html: 


<div id="aj" itemscope 


itemtype="http://microformats.org/profile/hcard"> 


«hl itemprop="fn"> 
«meta itemprop="n" content="AJ"> 
A.J. 

</h1> 


<img itemprop="photo" alt="AJ" 


src="http://ww.userfriendly.org/cartoons/ 


cartoons/aj/headshot_aj.gif" > 


<a itemprop="email" href="mailto:aj@userfriendly.org"> 


aj@userfriendly.org 
</a> 
</div> 


With a little added CSS, you can make the 
item take on a business card-like appear- 
ance, as shown at right. 


Now let’s look at how the item data can be 
extracted with the microdata API. The 
first step is to get a list of all the items in 
the document: 


var md = document.getItems(); 


p===---------- 5 


| A3. 


AJ@USERFRIENDLY.ORG | 


LlIl--——————e—-- 


The getitemsO method returns a Моде! ist that represents all the top- 


level items in the document. This NodeList has three useful properties: 


© itemType— Tells you what sort of item has been found. In this case, 


you're expecting it to be http://microformats.org/profile/hcard as per 


the itemtype attribute in the source. 
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© properties—An array that gives you access to values through an 
itemValue property on each member. 


^ names— An array of property names. 
You can examine all three with a simple loop: 


for (var i = 0; i < md.length; i++) { 
logC'Found: ' + md[i].itemType); 
for (var j = 0; j « md[i].properties.length; j++) { 
Llog(md[i].properties.names[j] + ': ' 
+ md[i].properties[j].itemValue); 


} 


The 10g function writes the string parameter out on the page so you can 
examine the output. Here are the results of running that code on the 
previous example markup: 


Found: http://microformats.org/profile/hcard 

fn: A.J. 

n: AJ 

photo: http: //www.userfriendly.org/cartoons/cartoons/aj/ 
headshot_aj.gif 

email: mailto:aj@userfriendly.org 


Note that the itemValue property performed a useful service for you 
because it understands how to get the value from different types of ele- 
ments. For the fn property on the <һ1> element, it returned the text con- 
tent of the element; for the n property on the «neta» element, it returned 
the value of the content attribute; for photo on «img», it returned the src 
value; and for email on an «a» element, it returned the href. 


The email value is incorrect: emails shouldn't have mailto: appended to 
the front of them. You might also want to use the subproperties of n, 
such as given-name and family-name. Let's adjust the markup: 


«hl itemprop="fn"> 
«span itemprop-"n" itemscope» 
«span itemprop-"given-name" -A«/span». 
«span itemprop="family—name">J</span>. 


</span> 
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</һ1> 
<img itemprop="photo" alt="AJ" 
src="http://ww.userfriendly.org/cartoons/ 
cartoons/aj/headshot_aj.gif" > 
<span itemprop-"email"» 
«a href="mailto:aj@userfriendly.org"> 
aj@userfriendly.org 
</a> 
</span> 


You can see the full code in ch05/microdata-api-la.html. Here are the 
results of running the same extraction loop used earlier: 


Found: http://microformats.org/profile/hcard 

fn: A. J. 

n: [object HTMLELement] 

photo: http: //www.userfriendly.org/cartoons/cartoons/aj/ 
headshot_aj.gif 

email: aj@userfriendly.org 


The email is fixed, but now there’s something wrong with the n value. 
It’s no longer a simple string, it's an HTMLElement. This is because if an 
item has child properties, itemValue doesn’t contain a string; instead it 
contains another NodeList object. You can loop through that one the 
same way as before, but it’s easier to define a recursive function: 


function getMDProperties(name, props) { 
if (name.length > 0) name += '/'; 
for (var i = 0; i < props.length; i++) { 
if (typeof(props[i].itemValue) == 'object') { 
getMDProperties(props.names[i], 
props[i].itemValue.properties); 
) else { 
log(name + props.names[i] + 
+ props[i].itemValue); 


} 


This function is modeled on the loop used before, but it checks to see 
whether itemValue is an object. If it is, then the properties of the child 
object are passed recursively to the function. The name of the parent 


www.it-ebooks.info 


Using 


Getting semantic with the microdata AFI 183 


property is passed in as a parameter so the function can list that along- 
side its child properties. Now the loop is greatly simplified: 


var md = document.getItemsQ; 

for (var i = 0; i < md.length; i++) { 
logC'Found: ' + md[i].itemType) ; 
getMDProperties('',md[i].properties); 

} 


And the output, as you can see for yourself in ch05/microdata-api- 
2.html, is more like you want: 


Found: http://microformats.org/profile/hcard 

fn: A. J. 

n/given-name: A 

n/family-name: J 

photo: http: //www.userfriendly.org/cartoons/miranda/headshot. aj.gif 
email: aj@userfriendly.org 


multiple microdata formate 

To finish this short exploration of the microdata API, let's consider what 
you might do with a more complex page that has multiple types of 
microdata items available. In ch05/microdata-api-3.html, an additional 
hCard has been added as well as an event using the http:;// 
microformats.org/profile/hcalendaritvevent vocabulary. 

ADDRESSES 

cea 1 

1 ] 

I i 

1 АЗ. ©): 

1 i 

| AJ@USERFRIENDLY.ORG | 

APPOINTMENTS 

нн 1 

i i 

- THE BIG DATE Ч 

| 3IST AUGUST @ 8PM UNTIL 1ОРМ (OR ALL NIGHT. IF THINGS ! 

1 GO WELL) i 

1 LOCATION: MACMILLAN OBSERVATORY І 

І I 

netstat emia 1 
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This is what the event markup looks like: 


<div itemscope 
itemtype="http://microformats.org/profile/hcalendar#vevent"> 
<h2 itemprop="summary">The Big Date</h2> 
<p> 
«time itemprop="dtstart" datetime="2011-08-31T20:00:00Z"> 
31st August @ 8pm 
</time> 
until 
«time itemprop="dtend" datetime="2011-08-31T22:00:00Z"> 
10pm 
</time> 
Cor all night, if things go well) 
</p> 
<p>Location: 
«span itemprop="Location">Macmillan Observatory</span> 
</p> 
</div> 


Keeping the same function as before, all three microdata items are 
found and their properties enumerated. But maybe you're writing a 
calendar-event application and are only interested in the events; or, 
slightly more creepily, you might be writing context-sensitive advertis- 
ing into the page with JavaScript and keen to pull out locations and 
dates. Rather than grab all the items and discard the ones you're not 
interested in, you can tell the getItems() method which sort of items 
you want: 


document.getItems('http://microformats.org/profile/hcalendar£vevent'); 


The parameter is a space-separated list, so you can specify more than 
one type if necessary —for example, if you want to look for items of 


THE MICRODATA АРТ LETS YOU ACCESS STRUCTURED DATA WITHIN YOUR PAGE 
CONTENT. THIS Т5 USEFUL WHEN YOU'RE NOT IN CONTROL OF THE 

— GENERATION OF THE CONTENT AND NEED TO GENERATE AN ALTERNATIVE VIEW 
OR INDEX OF THE DATA, OR GIVE THE USER THE OPTION OF CLICKING A LINK 
TO A CONTACT IN THEIR ADDRESS BOOK OR AN EVENT IN THEIR CALENDAR. 
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type http://schema.org/Event as well as the standard events. You can 
look at the type-specific example in ch05/ microdata-api-3a.html. 


Lag-free interfaces with web workers 


All JavaScript in a browser has traditionally been run in a single exe- 
cution context (a thread in operating system terms). That changed with 
the release of IE8, which separated the execution of interface code and 
web-page code, and then the launch of Google Chrome, which was 
built from the ground up to be multithreaded. Other browsers have 
since followed suit. This made browsers quicker, more responsive, and 
more resilient to bad or malicious code, but all the JavaScript in a sin- 
gle page still used the one thread assigned to it. There was no way for a 
web author to take advantage of multiple threads to offload expensive 
processing to another thread while still responding to user input, as 
they could in a desktop application. For this purpose, web workers 
were created. 


Single-threaded and multithreaded 


Single-threaded means the web browser does only one thing at a time. After it 
starts executing a single JavaScript function, it carries on until that function is 
finished. While it's executing the function, the browser can't do anything else: 
respond to clicks, animate GIFs, scroll the page, and so on. This isn't unusual; if 
you have an old computer with only a single processor with one core, it can only 
do one thing at a time too. One of the primary jobs of an operating system is to 
switch between applications so quickly that the computer appears to be doing 
more than one thing at a time. 


Normally, each JavaScript function also executes so quickly that you don't no- 
tice; but some heavy processing, a simple coding mistake, or even a malicious 
script could bring the browser to a halt. 


If the browser is multithreaded, it can take advantage of the operating system's 
abilities to switch between tasks. If one thread starts eating up resources, the 
browser can recognize this on another thread and take corrective action. The ad- 
vent of multicore processors, which can do more than one thing at a time, also 
opens up an opportunity to increase the performance of the entire browser by 
splitting execution across multiple cores. 
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To test the utility of web workers, all you need to do is 
Standard . . ү 

write some bad code. This function runs a loop several 
E е 40 million times and attempts to report progress to the 
= page every so often: 
Sy е 3.5 function kill browserO { 
ce log('Starting'); 
E Q 10.0 var j = 9; 
Er var n - 1e9; 
Es var p = n/10; 
$ О 10.60 
e for (var i20;i«n;i-4) { 
m if (j++ > p { j=0; 1000); } 

6" > 
log(C'Done'); 


} 


The page has two buttons: one that calls this function directly and one 
that calls it via a web worker. Depending on how fast (or slow) your 
machine is, you may need to adjust the n value to get the best effect. 
Change the exponent (the number after the e) either up or down if you 
don't see the following behavior. 


Start by calling kill browserO directly by FRI 12 AUG ZON 0134:24 BST 
clicking the button. Unfortunately, noth- Kil brogser | Start worker 


ing happens — not even the initial "Start- 
ing" message. At this point you may find 
that your browser won't respond to clicks. 


The timestamp claims that only 5 seconds FRI 12 AUG 201 O13442 BST 
have passed, but it stopped updating the (Bregen ( start worker 
moment the button was clicked. Eventu- 

ally, the browser recognizes the issue and 

asks if you want to stop the script. 


FRI 12 AUG 2011 01:3442 BST 


Kill browser Start worker 


Warning: Unresponsive script 
A script on this page may be busy, or it may have stopped responding. You can stop 


the script now, or you can continue to see if the script will complete. 
g 


www.it-ebooks.info 


Lag-free interfaces with web workers 187 


After you stop the script, the other func- 
tions —such as 1090) and the timestamp 
updater — get a chance to function. Sud- 
denly all the information you were expect- 
ing appears. 

All in all, this is a pretty bad user experi- 
ence, and it doesn't even give you the 
results you were expecting. Let's look at 
what happens when you use a web worker 
instead. 


With a worker, the difference is immedi- 
ately obvious — the “Starting” message 
appears straight away. 


The other noticeable differences are that 
the timestamp continues updating and the 


browser remains responsive. 


Meanwhile, the computation updates are 
posted regularly. 


FRI 12 AUG ZON 013522 BST 


Kill browser Start worker 


FRI 12 AUG 201 01:35:37 BST 


Kill browser Start worker 


STARTING 
100000001 


FRI 12 AUG 2011 01354 BST 


Kill browser Start worker 


FRI 12 AUG 201 013545 BST 


Kill browser Start worker 


To turn the kill_browser() function into a web worker, the first and 


most obvious change is that you need to put it in a separate file. You 


can then create the worker object from the main page like this: 


var worker = new Worker("web-worker-1.js"); 


Workers don’t have access to the DOM; they can't update elements on 


the page or access any global variables in your script. Data has to be 
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passed to and from the worker by messages. Set up a listener for mes- 
sages from the worker that logs the data using the usual function: 
worker.onmessage = function(event) 1 


logCevent.data); 
} 


Similarly, you signal that the worker is to start computing by passing it 


a message using postMessage: 


«button onclick="worker.postMessage('Starting'); return false;"> 
Start worker 
</button> 


In the function, all attempts to access the DOM must be removed. This 
means replacing the log function with calls to postMessage(): 


function kill browser() { 


var j = 0; 
var n = 1e9; 
var p = n/10; 


for (var i=0;i<n;i++) { 

if (j++ > p) { j=0; postMessage(i); } 
} 
postMessage('Done'); 


} 


Finally, the worker needs to listen to messages so it knows when to 
start: 


onmessage = function(event) { 
postMessage(event.data) ; 
kill browser(Q; 

} 


You can try this example for yourself with the files ch05/web-workers- 
l.html and ch05/web-worker-1.js. 


WORKERS ARE A POWERFLIL ADDIT ION TO THE WEB AUTHOR'S TOOLKIT. ALLOWING 
YOU TO WRITE MORE DESKTOP-LIKE APPLICATIONS WITHOUT RESORTING TO 

„7 ADVANCED JAVASCRIPT TRICKERY. IN THE NEXT SECTION, WE'LL SUMMARIZE 
BROWSER SUPPORT FOR EVERYTHING COVERED IN THIS CHAPTER. 
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Browser support 


With the exception of the microdata API, support for everything in this 
chapter is surprisingly complete across all major browsers. As men- 
tioned in the relevant sections, there are some inconsistencies in the 
implementations of contentEditable and drag-and-drop, particularly in 
older versions of IE compared to the other browsers, but these aren't 
insurmountable. The richer web applications enabled by these APIs are 
already within your reach. 


ee o09€9 

12 14 4 6 8 |9 | 10 | 11.5 12 5 5.1 
contentEditable e ° ° ° ° ° ° ° ° ° ° 
Drag-and-drop ° ° ° ° o o ° ° ° 
hashchange е е е е е е е e e e е 
popState ° ° ° ° ° ° ° о о 
Microdata АРІ б 
Web workers e e e e ° ° ° ° ° 
Кеу: 


e Complete or nearly complete support 
o Incomplete or alternative support 
Little or no support 


Summary 


This chapter has presented the most interesting HTML5 APIs, focused 
on enriching the in-browser experience. We've covered creating word 
processor-style WYSIWYG editing interfaces and allowing natural 
drag-and-drop interactions. You've learned that managing the 
browser's history allows you make the Back button behave in a more 
sensible way in the context of your application, while the microdata 
API gives you access to structured semantic information in page con- 
tents. Finally, web workers make your app more responsive by running 
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any heavy processing in a background thread that doesn’t interfere 
with the UI. 


The best way to learn more is to try coding for yourself. Download the 
book’s sample code to get started. 


NOW THAT YOU'VE LEARNED ABOUT APIS FOR CREATING RICH 
BROWSER APPS, IN THE NEXT CHAPTER YOU'LL LOOK AT HTMLS 
APIS RELATED TO NETWORKING AND COMMUNICATION. 
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This chapter covers 


• Finding the user's location and proximity to places and people of interest 
* Communicating directly with content trom other servers 
• Having the server push information to the user rather than rely on pull 


* Building websites that work when theres no network connectivity 


The previous chapter discussed HTML5 APIs that worked directly with 
the content in the browser, but one of the key features of the web is that 
it’s not about standalone computers: it’s about a connected network. 
HTMLS5 has a number of APIs related to connectivity and communication, 


and you'll learn about them in this chapter. 


AGAIN, THE EXAMPLES IN THIS CHAPTER RELY ON A BASIC UNDERSTANDING 
OF JAVASCRIPT. READ APPENDIX D FIRST IF YOU NEED MORE HELP. OR, IF 
YOU'RE MORE OF A DESIGNER THAN A DEVELOPER, SKIP AHEAD TO CHAPTER 7. 
WHERE WE START TO LOOK IN DETAIL АТ CSS3. 


191 


www.it-ebooks.info 


192 


CHAPTER 6 


Network and location APIs 


Finding yourself with the Geolocation API 


Location-aware services and applications are a hot topic at the 


moment. Most of us are now familiar with navigation devices in our 


cars that constantly update position information using the Global Posi- 


tioning System (GPS) network. These days, many mobile phones and 


other portable devices come with built-in GPS technology, as well as 


other positioning services, and the HTML5 Geolocation API exposes 


these to your web pages. 


Content editable 1 Minefield 


Ble tdt View History Bookmarks pois Нер 
© Content editatie 1 Ф 


STEF 


STEF|WORKS AS THE CORPORATE SALES MANAGER HE | 
THE MARKETING EFFORTS WITHIN THE FIRM AND SELI 
BEFORE THEY EXIST. HE CANT UNDERSTAND THE WAY 


PROBABLY BECAUSE THEY MAKE MUCH MORE MONEY Tt 


Google already uses the 
Geolocation API if you 
access its site from your 
mobile phone. The screen- 
shot at left shows that 
Google is aware of my cur- 
rent location. One of my 
options upon searching is 
to choose Local, which 
provides search results 
that are tailored to my cur- 
rent location. 
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De Lit View History Bookmarks Bots Нер 
© Content edabie 1 Ф 


STEF 


STEF (SOMETIMES WORKS AS THE CORPORATE SALES 
RUNS MOST OF THE MARKETING EFFORTS WITHIN TH 
SELLS THINGS BEFORE THEY EXIST. НЕ CANT UNDER: 
TECHIES THINK. SO DOESN'T GET VERY FAR WITH THE 
QUAKE. ALTHOUGH HE ADMIRES THE POWER OF MICRO 
MARKETING MUSCLE. НЕ HAS A REAL PROBLEM WITH M: 
ЅАГЕЅМЕМ PROBABLY BECAUSE THEY MAKE MUCH MOR 
HE DOES. 
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Finding your location 


THE GEOLOCATION API IS FAIRLY STRAIGHTFORWARD. LET'S LOOK AT 
SOME CODE THAT QUERIES THE USER'S CURRENT LOCATION. 
ы 
LZ 
Q9 "us THE getcurrentPosition 
FUNCTION GETS THE USER'S 


LOCATION. 
CHECK THAT THE if (navigator.geolocation) { 
BROWSER SUPPORTS 


THE GEOLOCATION АРІ. navigator.geolocation.getCurrentPosition( 


function (position) 


Қ THE CALLBACK FUNCTION IS 
/ 1 PASSED A position OBJECT. 
PASS A FUNCTION TO 


getCurrentPosition document.getElementById('location').innerHTML - 
THAT WILL BE CALLED WHEN "Latitude: ' + position.coords.latitude + 
Pe Nee rie POSEN ' Longitude: ' + position.coords. Longitude; 
} USE THE coords OBJECT TO J 
) GET THE LATITUDE AND 


LONGITUDE. 


The first thing the user will see when they run this code is the browser 
asking permission to share their location. Here are examples in Firefox, 


Chrome, and the Android browser. 


@ Gedlseation 1 MONIS FIFefox ЫС 

file Edit View History Bookmarks Tools Help http://www.dotrob.com/demo/geol... C) 
ааа ааа iod M cena 

<= Geolocation 1 > ~ 


www.dotrob.com wants to k 
@ know your location. Share Location Dont Share Remember for this site X 


Leam Mare. Where are you? 
WHERE ARE YOU? 


4 Geolocation 1 
LJ] ge www.dotrob.com. 
© | www.dotrob.com wank to track your physical location Learnmore Allow Deny х 


WHERE ARE YOLI? 


www.dotrob.com wants to know your location 


Remember preference 


Share location Decline 


www.it-ebooks.info 


194 CHAPTER 6 Network and location APIs 


After the user accepts, the browser looks up the location. When it finds 
the location, the function is called and the coordinates are displayed. 


Geolocation 1 - Mozilla Firefox 


File Edit View History Bookmarks Tools Help http://www.dotrob.com/demo/geol... C) 
аео 
{6) Geolocation 1 do v 


WHERE ARE YOU? Where are you? 


Latitude: 51.529110724999995 
LATITUDE: 5151333 LONGITUDE: -0.088947 Longitude: -0.12772145000000001 


Done 


@ em Аз m gt 


Finding your location more accurately 


Notice that the two screenshots at the end of the previous section are 
reporting different coordinates — they're about two miles apart. At the 
time when these were taken, my phone and my laptop were lying side 
by side on the same table— considerably closer than two miles! This 
discrepancy is because the browser on my laptop and the browser on 
my phone use different location service providers. There are four com- 
mon ways of identifying location. 


GEOLOCAT ION OPTIONS 


E (e) ® 


SATELLITE CELL TOWER WI-FI ADDRESS DATABASE 

*VERY ACCURATE (I-2OM) "ACCURACY (20-20ОМ) "VERY ACCURATE (1O-15M) "МОТ ACCURATE (1ООО-4ООООМ) 
ІМ OPEN SPACE ЮГ ce а IN URBAN AREAS “WORKS ON DESKTOPS 

“САМ BE SLOW TO "NEEDS NETWORK NEEDS NETWORK 

ACQUIRE SATELLITE “NEEDS MOBILE SIGNAL CONNECTION FOR CONNECTION 

LOCK LOOKUP 
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IT'S NOT POSSIBLE TO FIND OUT EXACTLY WHICH TECHNOLOGY WAS 

USED TO PROVIDE THE POSITIONING INFORMATION. BUT YOU CAN 

GET AN IDEA HOW ACCURATE THE FIGURE IS LIKELY TO BE, BECAUSE 
THE coords OBJECT ALSO INCLUDES AN accuracy PROPERTY. WA 


Here’s a new version of the previous example, this time displaying the 
accuracy. 


a Geolocation 2 i? M 
WHERE ARE YOU? Where are you? 


nies ысы а WENT on Latitude: 51.5304978 Longitude: -0.127846 
with an accuracy of: 92m 


Done eo 


USING THE ACCURACY IS STRAIGHTFORWARD. THE ONLY CHANGE THAT 
NEEDS TO BE MADE TO THE PREVIOUS LISTING IS AN EXTRA LINE IN THE 


CODE WHERE YOU WRITE THE RESULTS TO THE PAGE. 
А e P d THE ACCURACY 
` IS A VALUE IN 
A document.getElementById('location').innerHTML = METERS. 
"Latitude: ' + position.coords. latitude + 
, Longitude: ' + position.coords. longitude + 
' with an accuracy of: ' + position.coords.accuracy + 'm' 
THESE LINES ARE 


UNCHANGED. 


THE coords OBJECT ALSO HAS A 
AN accuracy PROPERTY. 


Finding your location continuously 


What if you want to continuously track the user’s position? You could 
just call getCurrentPosition() repeatedly, but that’s a waste if the user is 
stationary, and it could drain battery life on hand-held devices. A better 
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option is to have the browser tell you when there’s an updated location. 
For this, the Geolocation API provides the watchPositionO method. 


This screenshot shows my progress 
through North London over a couple 
of hours one afternoon. All I had to do Where are you? 
to get this information was open the Latitude: 51.6092915 Longitude: -0.18770772 
with an accuracy of: 60m 
. n Latitude: 51.58780670000001 Longitude: - 
page in the phone s browser and then 0.16584736666666666 with an accuracy of 
68m 
keep the phone in my pocket. When 016431836606666566 wit an accuracy of: 
. . . 57m 
new geolocation information was 0:14397922000000002 with an accuracy of 
. LI 60m 
available, the browser activated the Latitude: 51.536900419999995 Longitude: - 
: 0.14405595 with an accuracy of: 57m 
callback function. UAMISIAS299999990 th n cea o 


75m 

Latitude: 51.53452908999999 Longitude: - 
0.13853497 with an accuracy of: 29m 
Latitude: 51.5313391 Longitude: -0.13349745 
with an accuracy of: 56m 

Latitude: 51.53038161999999 Longitude: - 
0.13272513 with an accuracy of: 61m 
Latitude: 51.529648529999996 Longitude: - 
0.12853056000000002 with an accuracy of: 
64m 


THE CODE IS ALMOST IDENTICAL TO THE PREVIOUS EXAMPLE. THE ONLY 
CHANGE IS IN THE METHOD CALLED. 


"d 


watchposition INSTEAD OF 
m getCurrentPosition. 
navigator.geolocation.watchPosition( 


function (position) { 
document.getElementById('location').innerHTML - 


2 


THIS FUNCTION WILL "Latitude: ' + 
NOW BE CALLED position.coords. latitude + 
MULTIPLE TIMES. ' Longitude: ' + +—<— THESE LINES ARE 


position.coords. longitude + UNCHANGED. 


with an accuracy of: + 
position.coords.accuracy + 'm' 


' 


D 


Practical uses for geolocation 
Now that you've seen the basics of acquiring position information, let's 
consider how you might use the Geolocation API in practice. We'll look 
at two simple examples: calculating how far the user is from a given 
point, and showing the user on a map. 
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The first example calculates how far the user is from the birthplace of 
Tim Berners-Lee. Although this example uses a single fixed point for 
simplicity, the techniques involved will work just as well for more 
advanced scenarios — working out how far apart two users of your 
website are, for example. 


POINTS ON A PLANE USING THE PYTHAGOREAN THEOREM. CALCULATING THE DISTANCE 
BETWEEN TWO LATITUDE/LONGITUDE POINTS ISN'T QUITE AS STRAIGHTFORWARD 


YOU MAY REMEMBER, FROM SCHOOL, WORKING OUT THE DISTANCE BETWEEN TWO 
BECAUSE THESE AREN'T POINTS ON A FLAT SURFACE, BUT POINTS ON A SPHERE. 9, 


Rather than learn all that 
math for yourself, you can use 


an excellent set of JavaScript 


бие YOU ARE APPROXIMATELY 13.30 
utilities from Chris Veness, KILOMETRES FROM THE BIRTHPLACE OF TIM 


available at www.movabletype BERNERS-LEE 
.co.uk/scripts/latlong.html. This 
library allows you to create 


E œ v-e- @ View (100%) = 


LatLon objects that have several useful methods available. Starting with 
a blank HTML5 document, you can create the following page with five 
simple steps. 


Start with an empty HTMLS page with a link to the LatLon.js 
library. All the JavaScript code goes in the empty init 


function: 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset-"utf-8"» 
<title>Geolocation 4</title> 
<script src="LatLon.js"></script> 
<script> function init(O { } </script> 

</head> 

«body onload="init();"> 

</body> 

</html> 
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For convenience, create a LatLon object for Tim Berners-Lee’s 
birthplace, East Sheen in London: 


var eastSheen = new LatLon(Geo.parseDMS('51?27N'49"N'), 
Geo. parseDMS('0?15\'49"W')); 


3 As usual, add a template in your HTML to fit the data into: 


<һ1> 

You аге <span id="accuracy"></span> 

<span id="distance"></span> 

kilometres from the birthplace of Tim Berners-Lee 
«/hi» 


( | Add a function to update the template: 


function writeLoc(message, accuracy) { 
document.getElementById('distance').innerHTML - message; 
if (accuracy > 100) 1 
document.getElementById('accuracy').innerHTML - 
'approximately'; 


} 


that it creates а LatLon object for the user’s current location. 


5 Take the usual geolocation boilerplate code, and adapt it so 


You can then use the distanceTo method of LatLon to get the 
distance between the two points: 


if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function 
(position) 
1 
var you = new LatLon(position.coords.latitude, 
position. coords. longitude); 
writeLoc(you.distanceTo(eastSheen) , 
position. coords.accuracy) ; 


р; 
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Although it’s neat that you can perform calculations on the coordinates 
you get from the Geolocation API, most users probably aren't bothered 
by exactly how far they are, as the crow flies, from Tim Berners-Lee’s 
birthplace, or any other famous landmark. It’s also likely that, outside 
of geocachers, most people aren’t too interested in their exact latitude 
and longitude. They’re far more likely to want to know where they are 
in some sort of sensible context —in other words, on a map. 


GOOGLE OFFERS A FREE SERVICE FOR THE BASIC DISPLAY OF A MAP ON A WEB 
PAGE. THE NEXT EXAMPLE TAKES THE INFORMATION FROM THE GEOLOCAT ION 
АРТ AND USES IT TO CALL UP A MAP OF THE USER'S CURRENT LOCATION. 


SA, 


GeGlocation э - Mozilla Firefox 


бесри укы нышу, MM CON CHER к http://www.dotrob.com/demo/geol... С) 
9 Geolocation 5 Ф У | 


WHERE ARE YOU? | Where are you? 


Em led 
Ó TAF- http.//maps google com/ Vstabcmap?centerss1.529144233333334, 
8" аза] ве» ecd | 0.127835 446666666618 O08 | 2& i 0694404408 mapeypenrosdenap&markersscel 
MTTPA/MAPS GOOGLE. COM/MAPS/APL/ST AT LCMAP? CENTER)5I5(333-OOB89 7bZOOMM25 | 0.127035300404666678.540007(0lsà 


SIZEMAOXUADUMAPT ҮРЕ ЖОАРМАР® | 
ч ALSE 


— 


The Google Maps API requires some parameters as part of a URL. The 
URL can be built in the writeLocQ function and then set to be the 
source of an image element. For convenience, create an empty image 


element in your page where the map is to appear: 


«img id-"location"» 
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In the callback function, set the URL of the image to the appropriate 
Google Maps API call: 


function init() { if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function (position) { 
writeLoc(position.coords) ; 1);} 
function writeLoc(coords) { 
var l = 'http://maps.google.com/maps/api/staticmap?center-' + 
coords. latitude + ',' + coords.longitude + 
'&zoom-12&size-440x440&maptype-roadmap' + 
'&markers-color:red|color:red|label:a|' + 
coords. latitude + ',' + coords.longitude + 
'&sensor-false'; 
document.getElementById('location').src = 1; 
document.getElementById('debug').innerHTML - 1; 
} 


When the image URL is set, the browser will load the appropriate map 
from the Google Maps API. 


NOW YOU KNOW WHERE YOU ARE. WHAT ABOUT TELLING SOMEONE ABOUT IT? 
COMMUNICATION IS CENTRAL TO THE WEB, BUT WEB PAGES HAVE BEEN 
CONSTRAINED IN WHAT THEY'RE ALLOWED TO COMMUNICATE WITH AND HOW 
THEY'RE ALLOWED TO DO IT. HTMLS OFFERS NEW COMMUNICATION APIS: FOR 
COMMUNICATING IN A SAFE WAY IN BROWSER-BASED APPS, CROSS-DOCLIMENT 
MESSAGING; AND FOR COMMUNICATING EFFICIENTLY WITH A SERVER IN REAL TIME, 
THE WEBSOCKET API. THE NEXT SECTION LOOKS AT THESE APIS IN MORE DETAIL. 


Communication in HTML5 


The communication model in НТМІА is pretty much the same as it was 
in the first version of HTML. The user requests information from a 
server, and then the server delivers it. Although innovations like the 
XMLHTTPRequest object allow us to do some cunning things, the underly- 
ing model is the same. In addition, content loaded from different serv- 
ers is usually shielded from other servers—a policy known as vame 
origin restriction. 


THIS SECTION NECESSARILY INVOLVES SOME INTERACTION WITH A 

SERVER; DISCUSSING HOW TO GET EVERYTHING WORKING ON ALL 

POSSIBLE ARCHITECTURES WILL TAKE TOO MANY PAGES. IF YOU'RE 
МА NOT COMFORTABLE WITH THE SERVER SIDE OF THINGS, SKIP AHEAD. 
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Enabling more secure integration with cross-document messaging 


In many situations, people like to use widgets from other websites 


inside their own pages. Common scenarios where this happens are 


Facebook’s Like buttons, external commenting systems such as Dis- 


qus, and Google Ads. There are two basic approaches for this: 


© The <iframe>—An embedded window inside your page into which 


another web page is loaded. The page inside the <iframe> is completely 


separate from the page containing the <iframe>, and standard browser 


security prevents them from communicating with each other. 


^ JavaScript include — An inline «script» element in the host page, which 


is allowed to create elements and fetch content from the server from 


which it came. The script is completely integrated in the host page 


and has access to all the information the host page does. 


Browser support quick check: 
cross-document messaging 


Standard 
e « 
О + 
e “ 


The problem is that there are two extremes. With the 
<iframe>, you can guarantee that the widget doesn’t have 
access to any private data about your users that you hap- 
pen to be manipulating with JavaScript, because it 
doesn’t have access to anything in the host page, includ- 
ing any information that might be useful for the script. 
With the JavaScript include, the opposite is true: the 
script has access to everything in the page, including any 
cookies that may be set and any forms the user is filling 
in. What’s needed is a solution that maintains the privacy 
and security allowed by <iframe>s but allows a controlled 
flow of infor-mation between the two domains. This is 
what cross-document messaging provides. 


Faking multiple domains 


Experimenting with multiple domains requires that you have multiple domains 
available. If you don’t happen to be one of those people who collect domain 
names, you can fake it on your local machine by editing your hosts file. On Win- 
dows, this file is usually located at C:\Windows\System32\Drivers \etc\hosts 
(note that the filename doesn’t have an extension) and on Linux and Unix systems 
at /etc/hosts. The file format is an IP address followed by a number of aliases: 


di2 9rd 
тозо 


myfirstfakedomain.com 
myotherfakedomain. com 
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(continued) 


If these two lines are added to your hosts file, then browsing to either http:// 
myfirstfakedomain.com or http://myotherfakedomain.com will direct a request 
to a web server running on your local machine. 


To experiment with cross-domain messaging, you'll need two files. The 
first, the parent page, contains an <iframe> element that will load the 


second child page: 


«iframe width="600px" ЕСП E 
Е " m H E " Die Eat Wew History Bookmarks pois telp 
height="200px" src="child-1.html"> # Cross document messagg! [9 v 
</iframe> CROSS-DOCUMENT MESSAGING - PARENT 


<textarea id="message"> 
This is a message in 
the parent frame 

</textarea> Opiate parer 


CROSS-DOCUMENT MESSAGING - CHILD 


This is a message in the child frame 


P А This is а message in the parent frame 
This page also contains a <button> 


Update сй 


that will initiate communication 


with the child: 


«button onclick="update_child(Q "> 
Update child 
</button> 


The update. childO function attempts to directly edit the contents of the 
child page: 


function update childO { Рети GSU MENT RIS ERIT T MIRO 
Ble gót yew нуп Bookmarks фрон Help 
var el - document рна Я 
.getElementsByTagName С CROSS-DOCUMENT MESSAGING - PARENT 
'iframe' 
j[01; CROSS-DOCUMENT MESSAGING - CHILD 
; Updated from t 
var tb = el.contentDocument ia AR 
.getElementById('message'); pae prot 
tb.value - 'Updated from parent'; This is a message in the parent frame 
} алы 
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The child page is similar: 
<textarea id="message"> 

This is a message in the child frame 
</textarea> 


But this time, the <button> attempts to communicate with the parent: 


<button onclick="update_parent()">Update parent</button> 


When both pages are on the same To CHORD ӨМ СЕЗИЛ ГТ PURE NNT тж 
Bile Edt yew History Bookmarks pois Help 
<a > 


CROSS-DOCUMENT MESSAGING - PARENT 


domain, it's possible to access the 
elements of the child page directly 
and do the same in reverse (access CRO99-DOCUMENT MESSAGING - CHILD 
the parent from the child): (ahaa 


Update parent 


function update parent() { 
var tb = parent.document 
.getElementById('message'); 
tb.value - 'Updated from child'; 
} 


Updated from child 


Update child 


But look what happens if the pages ae CFO RUT RENEE SARE FE 
бє н Yer музу eames per e = 
are served from different domains: ананан Мер 


Page Zne CSS jS Console: V Errors V Wamings 9 мо Log 


99:57:49,829: Exception: Permission denied for -httpi//lecalhosti00MP to C 
get pregerty HTMLDocument .getEtesentById fros «http://www. boogóesign.com» 


«iframe width-"600px" EU eiae iw atest 
height="200px" т 
src="http://www.boogdesign.com/ 
examples/messaging/child- 
2.html"» zm 
</iframe> This is a message in the parent frame 


> - 
CROSS-DOCUMENT MESSAGING - CHILD 


This is a message in the child frame 


Update child 


The pages are otherwise identical, but now when you click Update 
Child, the browser reports an error: 


Exception: Permission denied for «http://localhost:8000- to get 
property HTMLDocument.getElementById from «http://www.boogdesign.com». 


The cross-document messaging API allows you to work around this 
security restriction, but it's slightly more complex than accessing the 
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documents directly. The first step is to add a listener to the page for the 
message event that will call a function when a message is received: 
window. addEventListener('message', receiver, false); 
function receiver(e) { 

document.getElementById('message').value = e.data; 


} 

This event listener can be added in both the parent and child pages. 
The update. childO function then needs to be changed to call the post- 
Message() method: 


function update childO { 


Ble [dt View History Bookmarks Tos Мер - 
маг е1 = pep = 
document .getElementsByTagName С CROSS-DOCUMENT MESSAGING - PARENT 
'iframe') [0]; 
: CROSS-DOCUMENT MESSAGING - CHILD 
el.contentWindow 
Updated from parent 
. postMessage( 
"Updated from parent', '*' Upana purest 
2; 


This is a message in the parent frame 


Update child 


The same postMessage O method can be called from the child to the parent: 


function update. parent() 1 


parent пи БӘ ETE 30. 
-postMessage( CROSS-DOCUMENT MESSAGING - PARENT 
'Updated from child', 
ipe CROSS-DOCUMENT MESSAGING - CHILD 
) s; Updated from parent 
} тыы 


Updated from child 


Update child 


ALTHOUGH THIS FUNCTIONALITY ALLOWS YOU, THE WEB DEVELOPER, GREAT 
POWER, IT ALSO INCREASES YOUR RESPONSIBILITY. NOW THAT THE BROWSER 
HAS PROVIDED A WAY AROUND A SECURITY RESTRICTION, YOU NEED TO 
PROVIDE YOUR OWN SECURITY CHECKS. 
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In the following code, the receiverO function has been modified to 
check the origin of the onmessage event: 


function receiver(e) { 


if (е.огідіп == 'http://www.boogdesign.com') { 
document.getElementById('message').value - e.data; 
) else 1 
alert('Unauthorized'); 
} 


} 


Similarly, the update functions should be modified to send the origin: 


function update. parent() 1 
parent.postMessage('Updated from child', 'http:// 
www.boogdesign.com'); 


} 


Note that the origin argument here should be the parent’s origin, not 
the child’s. 


Communicating between documents across domains is just one of the 
new communication features in HTMLSA. It also offers new options for 
communicating with the server. The next section will look at the most 
exciting of these technologies: WebSockets. 


Real-time communication with the WebSocket AFI 


WebSockets are a lightweight protocol, new to НТМІ5, allowing а 
server to communicate directly with a web browser without waiting for 
a request. You may be thinking that the web has always had a way for 
the browser and server to communicate, and that it's a fairly fundamen- 
tal property, but it's always had a request-response model. This means 
that to receive a response from the server, the browser must first make 
a request. Although this is fine for web pages, it has limitations as far as 
web-based applications are concerned. If an application relies on fre- 
quent updates from the server — for instance, if it’s a multiplayer game 
or a chat application —the browser could end up not requesting an 
update as it becomes available, or wasting bandwidth requesting 
updates when none are available. 
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The WebSocket API solves this problem by allowing the server to initi- 
ate a response to the browser without the browser asking for it. 


Updates can now be delivered as they’re ready and only when they’re 


ready, as the following diagram shows. 


CLIENT SERVER 
REQUEST 
Канза 
RESPONSE — 
——— 
БР” Ё — 
_— AVAILABLE. 
REQUEST 
s o 
RESPONSE 
UPDATE 1 ЗА == 
RECEIVED [— UPDATE 2 
AVAILABLE 
M~ UPDATE З 
AVAILABLE 
REQUEST 
— 
RESPONSE 
UPDATES 2 & 3 -— ——— 
RECEIVED 


In a traditional AJAX model, 
updates from the server are sent 
when the client asks for them. If 
the client doesn't request an 
update, it sits on the server. 


Browser support quick check: 
WebSockets 


eocce 


Standard 


4.0 


4.0* 


10.0 


5.0 


* The WebSocket API is dis- 
abled by default in Firefox 
4 and 5 and Opera due to a 


security concern. It must 


be enabled manually. 


CLIENT SERVER 
REQUEST 
——— 
RESPONSE 
a EFON 
БР” Ё — 
= AVAILABLE 
UPDATE1 «RESPONSE 
RECEIVED UPDATE 2 
AVAILABLE 
RESPONSE 
UPDATE 2 — UPDATE 3 
RECEIVED AVAILABLE 
RESPONSE 
UPDATES  -4—— —— 
RECEIVED 
TIME 


With WebSockets, the server 1s 
in control of sending updates. 
They can be sent to the client 
as soon as they're available. 


A server for WebSockets: Node.js 


Experimenting with WebSockets requires a server. The fol- 
lowing example uses Node.js, a new server written using Ja- 
vaScript. Download Node.js from http://nodejs.org, and 
follow the instructions for installing it on your operating sys- 
tem. The server-side files used for the example are ch06/ 
messaging/server-1.js and ch06/messaging/server-2.js. 
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The first step on the client side is to create a new WebSocket instance: 


var socket = чч : 
new WebSocket ( SD RE @ |7 notelohtmis-cuciicodeicthotmessagingiwebsocket-Lh yy) 1 A 
"ws ://LocaLhost:8080/" Sut 
SOCKET HAS BEEN OPENED/ 
); SOCKET HAS BEEN CLOSED 


Then, assign event handlers to the 

socket object. In this first example, 
the server will wait 10 seconds and 
then close the connection, so you 


just need to watch the onopen and 


onclose events: 


socket.onopen = function () { 
log("Socket has been opened!"); 

} 

socket.onclose = function () { 
log("Socket has been closed"); 

} 


Now let’s look at what happens when the server sends a message. In 
the browser, you have to handle the onmessage event: 


socket.onmessage = function(msg) { 


Web Sockets 2 


log(msg.data); © с а [(Orotetiotems-cssaxcdexhowmessagingwetsacket-2h ty) I-A, 
H Comet Соње 
: SOCKET HAS BEEN OPENED! 
The data attribute of the event THE TIME NOW IS MON OCT 11 2010 03:08:18 GMT+O100 
К (BST) 
handler argument contains the THE TIME NOW 25 MON OCT п 2010 02:08:28 GMT+O100 
: ў (BST) 
message from the server; in this SOCKET HAS BEEN CLOSED 


case, the current data and time 
every 10 seconds. 


You can also control the connection 
from the browser with the close 
method on the socket object: 


socket.close(); 
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Finally, you may want to send a message to the server. This is done 
with the sendO method on the socket object, passing the message as the 
parameter: 


function send() { 


var msg = document € o QE @ [O rohelioctmis-cicuicodeichotumessaging/websocket-3h Yy] }— 
.getElementById('message').value; pem po БЕ 
socket.send(msg) ; SOCKET HAS BEEN OPENED! 

H THE TIME NOW 15 MON OCT 11 ZOIO OXO310 GMT*OIOO 

(BST) 
$ THANKS FOR SENDING: HELLO! 

The server is set up to echo back AIME ER Mee NAO Re Ne 

any message it receives. SOCKET. ME BEEN CLOSED 


THE WEBSOCKETS COMMLINICAT ION PROTOCOL HAS CHANGED FREQUENTLY 
DURING DEVELOPMENT, SO IF YOU ENCOUNTER DIFFICULTIES, CHECK THAT 
BOTH CLIENT AND SERVER ARE USING THE SAME VERSION OF THE PROTOCOL. 


Ж? 
| \ 


Offline web applications 


Although in the modern world we sometimes take connectivity for 
granted, there are plenty of situations where you might want access to 
web applications when you're offline—particularly when, as the 
authors of the НТМІ5 specification hope, more and more of the appli- 
cations you use every day are web applications. For a web application 
to be available offline, there are two basic requirements: 


^ A mechanism for storing the pages and other files (images, scripts, 
and stylesheets) required by the application 


oA place to store the user’s data as it’s accessed and updated while the 
user is offline 


In this section, you'll learn about HTMLS technologies for the first of 
these requirements: the application cache —a way of placing a copy of 
your web app on your user's machine. In the following section, you'll 
learn about the offline storage of data. 
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Before going into the application cache, you'll set up a development 
environment and then get a reminder of how web applications work 
when they're online. 


Setting up a development environment 


THE EXAMPLES IN THIS SECTION USE A LOCAL WEB SERVER, THE PYTHON MODULE 
SimpleHTTPServer, SO YOU CAN SEE BOTH ENDS OF THE COMMLINICAT ION IN REAL 
TIME. IF YOU'RE RUNNING LINUX, THIS MODULE IS PROBABLY ALREADY INSTALLED; 


OTHERWISE YOU'LL HAVE TO INSTALL A STANDARD DISTRIBLIT ION OF PYTHON. А 


SimpleHTTPServer records a line like this every time a request is made 
(it’s been split into three sections so it fits better on a single page): 


REQUESTED SERVER NAME 


и ‘ PROTOCOL AND VERSION 
Ue »- "GET /offline-1-a.html HTTP/1.1" 200 - 


REQUEST METHOD REQUESTED FILE RESPONSE STATUS 


Browser support quick check: 


offline apps 


ecce 


Ддрр саспе USES The only parts we're interested in are 


the request and the status code, so I'll 
4.0 4.0 elide the extra details in the examples 
that follow. 


"m зә In order to understand what’s going on 
with offline web applications, you first 
8.0 need a good understanding of what 
normally happens as the browser and 
10.6 10.5 


the web server communicate in order 
to display a web page. Let’s first exam- 
5.0 5.0 ine the interaction between the web 
browser and the server for a simple 
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two-page website, without enabling any of НТМІ5'ѕ offline features. 


Here are the two pages you'll use. 


ch06/offline-example/offline-1-a.html 


ch06/offline-example/offline-1-b.html 


<!DOCTYPE HTML> 
«html» 
«head» 
«meta charset="utf-8"> 
«title» 
Offline Web Applications 1 
— Page A 
</title> 
«link rel="stylesheet" 
href="offline-1.css"> 
</head> 
<body> 
<h1>Page A</h1> 
<p> 
<a hrefz"offline-1-b.html"» 
Go to page B 
</a> 
</p> 
</body> 
</html> 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 
Offline Web Applications 1 
Page B 
</title> 
<link rel="stylesheet" 
href="offline-1.css"> 
</head> 
<body> 
<h1>Page B</h1> 
<p> 
<a href="offline-1-a.html"> 
Go to page A 
</a> 
</p> 
<img src="example.png" 
alt="An example image"> 
</body> 
</html> 


First, start the local web server: 


# python -m SimpleHTTPServer 


Serving HTTP on 0.0.0.0 port 8000 ... 


If you load the page in the browser, 


the server records the following 


requests: 


Die Edt View History Bookmarks pois Нер 


© Offline Web Applications 1 - Pa. 


"GET /offline-1-a.html HTTP/1.1" 200 - 


"GET /offline-1.css HTTP/1.1" 200 - 


The page itself is requested, as is any- 


thing required to display that particu- 


lar page (in this case the stylesheet), 
but none of the links within the page 


are loaded. 
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When you click the link, the server 


Die Eat View History Bookmarks pois Help 


records the following two requests: EES ae г 
"GET /offline-1-b.html HTTP/1.1" 200 - РАЕВ 


"GET /example.png HTTP/1.1" 200 - 


Again, the page itself is requested as 
well as the image embedded in the 
second page. 


Most browsers, in their default config- 
urations, cache recently accessed 
pages. If you use the Back and For- 
ward buttons in your browser at this 
point, no new requests will be made to 
the server. 


Stop the server (press Ctrl-C/Cmd-C iom LET QC mm RC 


A Protiem kading page + x 


in the terminal): e 9-4 Q анаан хш 


^CTraceback (most recent call last): 
Unable to connect 


Firefox can't establish a connection to the server 


KeyboardInterrupt at locathost:8000 


In the browser, try going back and 
forward again. You'll see that the 


pages are still there in the browser's 
temporary cache. But if you try to 
reload the page, the browser tries to 
contact the server, finds it's unavail- 
able, and shows an error. 


The application cache 


The application cache is a service provided by HTML5 web browsers 
in which you can store your web apps for offline use. To change the 
previous example into an offline application, it requires one small 
change and an additional file. At the top of the home page, you need to 
add a reference to a manifest file, like this from ch06/offline-example/ 
example-2-a.html: 


<!DOCTYPE HTML» 
«html manifest-"offline-2.appcache"» 
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Then the manifest file itself needs to be created. This is a text file that 
begins with the words CACHE MANIFEST and then lists all the files in your 
web application, one per line: 


CACHE MANIFEST 
offline-2-a.html 
offline-2-b.html 
offline-2.css 
example-2.png 


Note that it's not necessary to list the file where the reference to the 
manifest appears, because the file that references the manifest is auto- 
matically added to the cache; but doing so may save you headaches 
later if you end up with a large application and you change the file from 
which the manifest is referenced. Also, note that paths are relative to 
the manifest file, not the file from which the manifest is referenced. 


Manifests and MIME types 

The file extension used here for the manifest file is .appcache. This is recom- 
mended by the HTML5 spec. Initially, manifest files were given a .manifest ex- 
tension, but it was found that Microsoft was already using this extension for 
another purpose. To avoid collisions, the recommended file extension was 
changed. But the file extension isn't as important to the browser as the MIME 
type the server sends along with the file in the headers. The correct MIME type 
for manifest files is text/cache-manifest. MIME types were discussed in chapter 
4, when we looked at video. 


Start SimpleHTTPServer again, and TIT 


This website 
access the new page. As before, the _ (localhost) із asking - 
@ to store data on Allow Never for This Site Not Now 
our computer for 
browser requests two files from the hne use 
server: PAGE A 


"GET /offline-2-a.html HTTP/1.1" 200 
"GET /offline-2.css HTTP/1.1" 200 


But this time there's a difference in the 
browser —it's asking for permission to 
store files for offline use. 
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If you click Allow, the browser imme- (Tortie Web Applications 2= Page A= Mozille =|=| 

Д file Edit View History Bookmarks Tools Help 
diately makes several more requests: Offline Web Applications 2 - P... |+ ~ 
localhost ve 


"GET /offline-2.appcache HTTP/1.1" 200 
"GET /offline-2-b.html HTTP/1.1" 200 PAGE A 
"GET /example-2.png HTTP/1.1" 200 GO TO PAGE B 
"GET /offline-2.appcache HTTP/1.1" 200 


The entire website is now available ТОНЕ Web Applications 27 Page 8 = MOZNE |5 
B ; 9 | Elle Edit View History Bookmarks Tools Help 
offline. You can test this by again stop- | otine web applications 2 -P... | 5 
ping SimpleHTTPServer and then, when | тән “с 

no server is running, visiting the sec- PAGE B 
ond page. GOTO PAGE A 
Even though you've never visited that WHAT ARE WE ротик 
. . TRYING TO 
page and the server is unavailable, the SET А 6000 з ware ветно 
МАРЕ АМ 
browser сап display the page to you. \ бами, 


Let’s try a little experiment. Start your 


File Edit View History Bookmarks Tools E 


local web server again, but edit the [C Offline Web Applications 2 - P... | 4k | 
offline-2-a.html file: = 
<h1>Edited Page А</һ1> PAGE A 

GOTO PAGE B 


Now visit the page in the browser 
again. Notice that your edit isn’t visi- 
ble. This is because you’ve told the 
browser to store the page locally. 
Changes you make to the file on the 
server aren't seen because the browser 
doesn't go back to the server for the 
file, even if you reload. 
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If you look in the console, you'll see that the only request the browser 
made is for the manifest file: 


"GET /offline-2.appcache HTTP/1.1" 200 - 


In order to make the browser fetch a new version of any cached file, 
the manifest needs to be updated. Any change will do. The best 
approach is to add a comment with a version number: 


CACHE MANIFEST 


#v1 File Edit View History Bookmarks Tools H 
offline-2-a.html Offline Web Applications 2-P... | 4 
offline-2-b.html localhost 
offline-2.css 
example-2.png EDITED PAGE A 

GOTOPAGEB 


When you reload, the edited page appears. 
If you check the console, you'll see that all 
the files in the manifest have been down- 


loaded again. 


Beware the browser cache 

There is a certain amount of caching built into HTTP, and browsers are often con- 
figured to minimize network traffic by serving pages out of local cache instead 
of downloading them again. This isn’t the same as having them in the applica- 
tion cache; there are no guarantees or control for the web author. But the brows- 
er cache can interfere with the application cache, because the browser may not 
look on the network for new versions of files even if it detects that the manifest 
file has been updated. In this case, the application cache is updated with files 
from the browser cache. The situation is even worse if the manifest file is loaded 
into the browser cache—then the user might never see your application updates. 
You can avoid issues by explicitly setting caching values in the headers of your 
files in the server configuration. Here’s the required line for Apache: 


ExpiresByType text/cache-manifest "access plus 0 seconds" 


In case you missed that last part, if you want to update a single file in your 
application, all the files in your application will be downloaded again. 


www.it-ebooks.info 


Offline web applications 215 


ISN'T A GOOD PLACE TO STORE DATA THAT WILL CHANGE OFTEN; IF 
YOU'RE EXPECTING YOUR USER TO EDIT DATA AS PART OF THE 


THE KEY POINT TO GRASP FROM THIS IS THAT THE APPLICATION CACHE 
APPLICATION, THEN YOU NEED TO STORE THAT DATA ELSEWHERE. б, 


l | 


НТМІ5 provides several options for storing an application's dynamic 
data, as you'll see in the section “Storing data for offline use.” In the 
meantime, the next section will cover the other key features of the 
application cache that you need to know about. 


Managing network connectivity in offline apps 
In this section, you'll learn about detecting the status of your offline 
application: is it currently online or offline? To understand how to do 
this, you'll need to explore some additional features of the manifest file; 
but first you'll see why the built-in Offline API isn't appropriate. 


HTML. provides the Offline API to detect whether the browser is 
offline or online. It consists of the ononline and onoffline events and a 
Boolean property, navigator.onLine. These would be an excellent way of 
managing when to attempt to sync data with the server —if they worked. 


That's a little harsh —the API does work, but not in a way that's useful 
to web authors. The offline state in HTMLS is tied to the state of the 
browser, not the state of your network connection or the availability of 
the server. Here are the basics of the API: 


' navigator.onLine— This property is true if the browser thinks it's 
online and false if the browser thinks it's offline. 

© window.online— This event is fired whenever the browser changes 
from an offline state to an online state. 


> window.offline— This event is fired whenever the browser changes 
from an online state to an offline state. 


A function can be attached to the events either by declaring an ononline 
or onoffline attribute on the body element, or by binding an event listener 
to the window object in the standard way, as in the following example. 
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window. setInterval( 
function () { log('onLine: 
10000 

2; 

window.addEventListener('online', 
function © { log('online event fired'); } , 
false 

2; 

window.addEventListener('offline', 
function © { log('offline event fired'); } , 
false 


э; 


+ navigator.onLine); }, 


The log function writes a message on OFFLINE EVENTS 


the screen so you can see what's going 


ИДЕ ; ONLINE: TRUE 
on. The full listing is in ch06/offline- ONLINE: TRUE 
: ONLINE: TRUE 
example/offline-events.html. E E 
ONLINE: TRUE 
In the screenshot, the local web server ONLINE: TRUE 
was started and the page loaded. After ONLINE: TRUE 
А ONLINE: TRUE 
a short time, the local web server was ONLINE: TRUE. 
stopped. As you can see, it made abso- 
lutely no difference to the output in the 
browser. 
The reason is that these events and Edit View History Bookma 
properties aren't designed to track — — 
. " New Window Ctri-N 
what's going on with the network con- Open Location... Ctri-L 
nection or the availability of the Open File... Ctrl+0 
Close Tab Ctrl--W 


$ 
remote server. Instead, they re Close Window  Ctri+Shift+W 


plumbed directly into a menu item in 


| Save Page As... Ctrl+s 
the browser UI: the Work Offline Send Link... 
entry, which is usually on the File gage Setup... 
menu. Print Preview 
Print... Ctri+P 
Import... 
Quit Ctrl+Q 


www.it-ebooks.info 


Offline web applications 217 


If the local server is started up again OFFLINE EVENTS 


and the page reloaded, you can see the 


| | ONLINE: TRUE 
effect of selecting and then deselecting ONLINE: TRUE 
fait OFFLINE EVENT FIRED 
Work Offline in the menu. ONLINE: FALSE 
ӨР : ONLINE EVENT FIRED 
This is perfectly reasonable behavior AURIS 


from the browser if you think about 

it — there are so many reasons the 
server may not be contactable, that it 
can't be tied to a single property in the 
browser or the operating system, or 
linked to a simple event. 


Before you get too disappointed, there's an alternative approach that 
relies on detecting the property that an offline application really cares 
about: whether it can connect to the server. To understand this 
approach, you need to learn about some further features of the manifest 
file: sections introduced with the keywords FALLBACK or NETWORK. A NETWORK 
section lists resources that will always be fetched from the network — 
they won't be available when offline. The FALLBACK section lists replace- 
ments for certain files or directories when the user's offline. Here's ch06/ 
offline-example/offline-3.appcache, which has a FALLBACK section: 

CACHE MANIFEST 

#v1 

offline-3-a.html 


offline-3-b.html 
offline-3.css 


FALLBACK : 
example-3.png dust-puppy-3.png 


Let's see what difference that makes in what files are requested when 
the browser makes an initial request for offline-3-a.html: 


"GET /offline-3-a.html HTTP/1.1" 200 PAGE A 
"GET /offline-3.css HTTP/1.1" 200 
"GET /offline-3.appcache HTTP/1.1" 200 GO TO PAGE B 


"GET /offline-3-b.html HTTP/1.1" 200 
"GET /dust-puppy-3.png HTTP/1.1" 200 
"GET /offline-3.appcache HTTP/1.1" 200 
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The file dust-puppy-3.png is fetched from PAGE B 
the server even though it isn’t listed in the ы: 
opening section of the manifest file. 


When offline-3-b.html is visited, it looks the 


same as before. Because the server is still 


WHAT ARE WE DOINK? 


| TRYING TO 


SET A GOOD І HATE BEING 
EXAMPLE. ^ MADE AN 


EXAMPLE OF! 


running, the example-3.png image is loaded 


as normal. 


But if the web server is stopped and the page PAGE B 
reloaded, then, depending on browser set- 
tings, the dust-puppy-3.png fallback image 


is shown instead. 


The significant browser settings are the ones 
to do with caching outside of the application 
cache. The browser may still choose to show 
the image out of the browser cache even 
when the server’s unavailable —see the side- 
bar “Beware the browser cache” for a dis- 


cussion of this issue. If the fallback image 
isn't shown when the page is reloaded, trya 
hard reload: Ctrl-F5 on Windows or Linux. 


Listing ch06/offline-example/offline-4.appcache has a few more new 
features: 


CACHE MANIFEST 
#v1 
offline-4.html 


FALLBACK : 
example-4.png dust-puppy-4.png 


CACHE: 
offline-4.css 
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FALLBACK : 
headshots/ dust-puppy-4.gif 


NETWORK : 


* 


In addition to multiple FALLBACK sections and a NETWORK section, this list- 
ing has two CACHE sections. There are two because CACHE is the default 
assumption at the start of the manifest file. It's possible to switch 
between sections at any point by adding one of the three keywords ona 
line by itself. This means the manifest file can be arranged to suit the 
application rather than forcing everything to fit into three sections. 


The other interesting feature of this manifest file is that it demonstrates 
the pattern-matching and wildcard ability of the FALLBACK and NETWORK 
sections. The NETWORK section has a star in it, which means “match any- 
thing" — anything that isn't listed is requested from the network. This 
is the default behavior, so it's not necessary to include it here, but if you 
were developing real offline applications you'd include URL patterns 
for your API in this section. 


The second FALLBACK section includes a directory. It's saying, "For any- 
thing in the folder headshots, fall back to dust-puppy-4.gif when offline." 


This screenshot shows ch06/offline- 


example/offline-4.html when online. 


WHAT ARE WE DOINK? 


, TRYING TO 
Here's the markup for this example: 


«img src-"example-4.png" 
alt="An example image"> 

<р>Ехатр1е starring:</p> 

«img src="headshots/pitr.gif" 
alt-"Pitr"» 

«img src-"headshots/mike.gif" 
alt="Mike"> 

«img src="headshots/stef.gif" 
alt="Stef"> 
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And here’s what the same page looks 
like when offline. Each image from the 
headshots folder has been replaced by 
the fallback image without having to 
explicitly list each image. 


It’s worth noting that in this particular example, the alt text no longer 
corresponds to the images displayed, so it might be a good idea to over- 
ride the alt text with JavaScript if you can detect that the page is 
offline. As discussed at the beginning of the section, it’s possible to do 
this now that you know how FALLBACK works. 


There are several possible approaches to using a fallback to detect the 
application’s online status, but they all boil down to the same thing: 
having a pair of files in the FALLBACK section of the manifest that have an 
easily detectable difference between the online and fallback versions. 
The complete listings for the two files this example uses are shown in 


the following table. 


ch06/offline-example/online.txt ch06/offline-example/offline.txt 


ONLINE OFFLINE 


It would certainly be possible to add more complexity; but the 
online.txt file will be fetched from the server frequently, so the shorter 
the better. In real life, it would be best to stop pandering to human 
readability and use values of 1 and 0. Now add these two files in the 
FALLBACK section of the manifest file: 


CACHE MANIFEST 
#v1 
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offline-5.html 
offline-5.css 
offline—checker.js 


FALLBACK: 
online.txt offline.txt 


These files can then be used to determine Check Offline Status | 
the online status. In this example it’s а 
linked to a button: each time the button is сек 
clicked, the online status is checked and ONLINE 
ONLINE 


reported. 


The full listing is in the files ch06/offline- 
example/offline-5.html and ch06/offline- 
example/offline-checker.js. The key parts 
of the code are shown next. 


Here’s the function that’s called when the button is clicked. It calls 
another function in the external JavaScript file, passing two functions 
as parameters. The first function is executed if the server’s available, 
the second if the server’s offline: 


function display_online_status() { 
check. online(C 
function) { logC'online'); }, 
function) { logC'offline'); } 
2: 
return false; 


} 


In a real application, the functions passed in would do something use- 
ful, such as synchronize the application data with the server or queue it 
for later delivery. But in this example, all they do is log the state of the 
connection to the page. 


Finally, here’s the function that does all the real work. Most of this is 
standard AJAX boilerplate; using any one of the popular JavaScript 
libraries will reduce the function to about four lines of code. The key 
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line is about halfway down, where req. responseText is checked to see if 
it contains the string 'OFFLINE': 


function check online(online fn, offline fn) { 
var currentTime = new Date() 
req = window.XMLHttpRequest ? 
new XMLHttpRequest) 
new ActiveXObject ("MSXML2.XMLHTTP.3.0"); 
var freshUrl = 'online.txt?brk-' + currentTime.getTime(); 
req.open("GET", freshUrl, true); 
req.onreadystatechange = function() { 
if Creq.readyState == 4) { 
if (req.status == 200) { 
if (reg.responseText.indexOf('OFFLINE') > -1) { 
offline fnO; 
) else 1 
online. fnO; 
H 
} else 1 
offline fnO; 


} 
req.send(nu11); 


HAVING YOUR APPLICATION AVAILABLE WHEN THERE'S NO CONNECTIVITY IS ONE 
THING, BUT MOST APPLICATIONS NEED TO INTERACT WITH DATA TO BE USEFUL. 

— IF ALL THE DATA IS ON THE SERVER, THEN HAVING THE APPLICATION WORK 
OFFLINE ISN'T OF MUCH USE IN ITSELF. IN THE NEXT SECTION, YOU'LL LEARN 
ABOUT STORING DATA SO IT'S AVAILABLE FOR OFFLINE APPLICATIONS. 


Storing data for offline use 


In this section, you'll learn about the Web Storage API, a convenient 
way to store data in the browser. Although web storage is crucial for 
any sort of offline application, it's also useful for providing quick access 
to data in the browser without having to repeatedly request it from the 
server. Web storage comes in two flavors: local storage, which is persis- 
tent across browser sessions, and session storage, which is lost when 
the user ends their browsing session. The storage APIs are also avail- 
able to offline apps, making them extremely useful for caching your 
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user’s data for access while they’re offline. The API for each is identical, 
so this section concentrates on local storage and then provides a quick 
comparison with session storage before finishing with a look at using 
web storage in an offline application. 


Local storage 
For many years, the only option web authors have had for storing data 
on the client has been cookies. These are small strings stored in the cli- 
ent browser along with an expiry date and a key to reference them by. 
They’re then passed back by the browser along with any HTTP request 
made to the server that set them. 


COOKIES ARE WIDELY LISED-ANY WEBSITE YOU VISIT THAT ALLOWS YOU > 
TO LOG ІМ OR REMEMBERS YOUR PAST ACTIVITY OR PREFERENCES IS USING 
COOKIES TO CORRELATE EACH REQUEST YOU MAKE WITH STORED —— A v 
INFORMATION ON THE SERVER, BUT THEY AREN'T WITHOUT ISSUES. 


The local storage APIs create a client-side key-value store so that data 
doesn’t have to be repeatedly fetched from the server. Cookies are useful 
for tracking things like whether a user is logged on, but they’ve been 
forced into a role where they end up storing a significant amount of data. 
This is a problem because each request the browser makes contains the 
full set of cookies it has. Local storage replaces cookies by providing a 
simple in-browser service for associating keys with values. The data 
stays in the browser and doesn't need to be sent back to the server. 


This section builds a simple to-do list application using local storage. 
First you need some markup for a text input and a button: 


«input type="text" id-"new item"» MY TO-DO LIST 

«button onclick="add_item() "> ма 
Add 

</button> 

«ul id="todo_list"> 

</ul> 


To add an item to the to-do list, the user must type a description into 


the text input and click the Add button. When the user clicks Add, 
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three steps are required: add the item to the list element on the page, 
add the item to local storage, and finally clear the text input ready for 
the next item: 


function add_itemQ { MY TO-DO LIST 
var new_item = (Write simple to do list app | Add 
document. 


getElementById('new item'); 
add. listitem(new. item.value); 
add. storageitem(new, item.value); 


new item.value - Б 


This calls functions to add the item to the list on the page and to add 
the same item to local storage. The function that adds an element to the 
page is straightforward, using the same DOM scripting techniques that 
everyone's been using for years with HTMLA: 


function add item() { 
var new item = document.getElementById('new item'); 
add. listitem(new. item.value); 
add. storageitem(new item.value); 


new item.value - : 


j 


The interesting thing is the call to the add storageitem function: 


function add. storageitem(item) { MY TO-DO LIST 

var key = new Date(); 

window. LocalStorage.setItem( vastes mM i 
key.getTime(),item * THINK OF THINGS TO DO 


); 


ЕЭ 


} 


The localStorage object is available from the window object. In this case, 
you call the setItem method that adds the provided key-value pair to 
the storage. It doesn't matter what the key is —it just has to be unique. 
If you call setItem with a key that already exists, it will overwrite the 
previously stored item, so the current time in milliseconds is used. The 
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value has to be a string, and in this case the value is whatever the user 
has typed into the text input. The full code for this first example is in 
ch06/offline-example/local-storage-1.html. 


Now that your to-do items are in local MY TO-DO LIST 
storage, they'll be there the next time you [ав 
Іоаа Һе page. Restart your browser and 
load the page again to check. You should 


see something like the screenshot here. 


You've not been lied to, your items are in 
local storage, but that doesn't mean they'll 
appear in your page automatically. You 
have to write application logic to grab the 
contents of localStorage and display it, just 
as you had to write code to add the to-do 
items to the page in the first place. 


TO RESTORE THE APPLICATION STATE, YOU NEED TO RUIN A FUNCTION WHEN THE 
PAGE LOADS THAT POPLILATES THE LIST WITH THE ITEMS IN localStorage. 
e РА YOU НАМЕ A FLINCTION TO ADD AN ITEM TO THE LIST, SO YOU JUST NEED A 


© FUNCTION TO EXTRACT THE ITEMS FROM localStorage. 
> 
OY HOW MANY ITEMS 
ARE STORED? 
LOOP THROUGH ALL THE 
STORED ITEMS. 
var todo index = window. LocalStorage. length; 
for (var i = 0; i < todo index; i++) { 
add_listitem( 
EUN KET FOR THE window. LocalStorage.getItem( 
INDEX. | : 
DENN S window. localStorage . key Ci) LISE THE KEY TO GET THE 
CURRENT ITEM. AND THEN PASS 
) THAT TO THE add FUNCTION. 


2; 
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You can find the complete listing in ch06/offline-example/local- 
storage-2.html. Look for the initO function for the previous code. 


There are some other functions you'll need MY TO-DO LIST 


for a complete application. A to-do list Add 


* WRITE A SIMPLE TO-DO LIST APP Delete 


т 2 . . 3) . . 
isn't much use if it’s impossible to remove a 
© THINK OF MORE THINGS TO DO Delete 


task after completion. To delete a single — 


item from localStorage, pass its key to the 
removeItem() method: 


window. LocalStorage. removeItem(key) ; 


This depends on knowing which element on the page is associated with 
which key in local storage. If a data-* attribute is used to store that 
information, then removal is straightforward. That attribute can be cre- 
ated in the add_listitem() function if it’s modified to accept both the 
key and the item as parameters: 


function add listitem(key, item) { 
var li = document.createElement('li'); 
li.appendChild(document.createTextNode(item)); 
li.setAttribute("data-key", key); 
var but = document.createElement('button'); 
but.appendChild(document.createTextNode('Delete')); 
but.onclick = remove item; 
li.appendChild(but); 
document.getElementById('todo. list').appendChild(li); 


IN A FULLY HTMLS-COMPLIANT BROWSER, THE LINE 
li.setAttribute("data-key", key) WOULD BECOME 
li.dataset.key = key. BECAUSE NO BROWSER HAS SO FAR 
IMPLEMENTED THE CUSTOM DATA ATTRIBUTE API, THIS 
EXAMPLE STICKS WITH THE TRADITIONAL DOM APT. 


\ 


Another change is required to support this. Previously it didn’t matter 
what the key was when adding a new item, but now it needs to be 
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added to the list item as entries are created. The key is created in the 
add_itemQ) method and passed in to both add. listitem() and 
add. storageitem(): 


function add item() { 
var new item = document.getElementById('new item'); 
var key = new Date(); 
add. listitem(key.getTime(), new, item.value); 
add. storageitem(key.getTime(), new, item.value); 


new item.value - г 


} 


Finally, a user may want to delete everything in local storage rather 
than individual items one at a time. This is easy using the clear() 
method: 


window. LocalStorage.clear(); 


You can look at the finished listing in ch06/offline-example/local- 
storage-3.html. 


Session storage 
So far, the example has used local storage, but the section introduction 
also mentioned session storage. Local storage and session storage have 
exactly the same API: if you go back through the example and replace 
every instance of localStorage with sessionStorage, it will still work. 
Here’s the sessionStorage version of the add and remove functions: 


function add_storageitem(key, item) { 
window. sessionStorage.setItem(key, item); 

} 

function remove storageitem(key) { 
window.sessionStorage.removeItem(key); 


j 


There's a full sessionstorage example in the listing ch06/offline- 
example/session-storage-1.html. 


The only difference between the two types of storage 1s the length of 
time the items are stored. Session storage is only guaranteed to last as 
long as the browser process; if the browser's closed, then any data 
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stored is lost (unless the session-restore features of the browser are 
enabled). Local storage lasts until your application clears it, or until the 
user manually deletes the data, no matter how many times the 
browser’s closed in the meantime. 


One note before we proceed: while the capacity of local and session 
storage is much larger than that of cookies, it’s still finite, and varies 
substantially between browsers. Web storage can be a useful way to 
store large amounts of data on the client side but, like all client-side 
technologies, you should never rely on it being available all the time. 


Putting it all together 


Now that the to-do list app is functional, it would be nice to enable it to 
work offline. Because the entire thing is self contained—no external 
files of any kind, just the single HTML file—you just need an empty 
manifest file 


CACHE MANIFEST 
#v1 


and a reference to that manifest in the markup: 


<!DOCTYPE HTML> 
<html manifest="storage.appcache"> 


Remember that the file that references the manifest is always cached 
and doesn’t need to be listed in the manifest file explicitly. If you have a 
set of single-page applications on the same site, then they can all refer- 
ence this one manifest file and they'll be cached the first time the user 
visits them. You can try it for yourself on your local web server with 
the example file in ch06/offline-example/local-storage-4.html. 


YOU'VE LEARNED ABOUT A LOT OF DIFFERENT HTMLS FEATURES IN 
2 THIS CHAPTER, BUT HOW MANY OF THEM CAN YOU USE RIGHT NOW? 
BROWSER COMPATIBILITY IS SUMMARIZED IN THE NEXT SECTION. 
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Browser support 


Browser support for most of the APIs discussed in this chapter is very 
good. Only Internet Explorer lets things down by not supporting Web- 
Sockets or the application cache, but support is being considered for a 
future release. 


eeo 09€ 
12 14 4 6 8 |9 |10 | 11.5 | 12 5 5.1 
Geolocation e ° ° ° ° ° ° ° ° ° 
Cross-document e ° ° ° ° ° ° ° ° ° ° 
messaging 
WebSockets e ° ° ° ° ° ° ° ° 
Арр сасһе ° ° ° ° ° ° ° ° ° 
Session ° ° ° ° ° ° ° ° ° ° ° 
storage 
Local storage ° ° ° ° ° ° ° ° ° ° 
Кеу: 


e Complete or nearly complete support 
o Incomplete or alternative support 
Little or no support 


Summary 
This chapter has covered a selection of the most interesting HTML5 
APIs associated with networking and connectivity. You should now be 
able to build apps that 
^ Take advantage of the user's location, thanks to the Geolocation API 
^ Communicate in a controlled way with pages on other domains 


^ Write real-time chat and game apps with WebSockets 
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© Build apps that work even when there’s no internet connection 


^ Store data in the browser with the storage APIs 


The best way to learn more is to try coding for yourself. Download the 
book's sample code to get started. 


THIS CHAPTER IS THE LAST IN THIS BOOK SPECIFICALLY ABOUT HTMLS. YOU'VE 
LEARNED HOW TO BUILD HTML 5 WEB PAGES AND SEEN SOME OF THE MANY NEW 
POSSIBILITIES FOR WEB APPLICATIONS THAT HTMLS ENABLES. BUT YOU DON'T 
JUST WANT YOUR APPLICATIONS TO BE FUNCTIONAL; YOU ALSO WANT THEM TO 
LOOK BEAUTIFUL. IN THE NEXT CHAPTER, YOU'LL START TO EXPLORE CSS3 AND 
THE NEW OPTIONS IT OFFERS FOR THE VISUAL PRESENTATION OF WEB PAGES. 
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Learning C995 


. he second part of the book begins by exploring the basics of CSS3 and 
selectors in chapters 7 and 8. Then, chapter 9 discusses how to use 
motion and color, chapter 10 covers borders and backgrounds, and 
chapter 11 wraps things up with a look at fonts and text formatting. 
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This chapter covers 


* Selecting elements based on their parents 
* Selecting elements based on their siblings 


* Selecting elements dynamically according to user activity 


Let’s remind ourselves what a CSS rule looks like. 


RULE 


е 


р { font-size: 1.4ет; } 


THE PART THAT TELLS THE 
SELECTOR DECLARATION ------- BROWSER WHAT TO DO 
THE PART THAT TELLS THE 
BROWSER WHAT TO DO IT TO 


In this chapter we’re concerned entirely with the parts of CSS that appear 
outside of the curly brackets —the selectors and associated syntax that 
makes up a CSS document. After this chapter, we'll concentrate almost 
completely on the stuff that appears inside the curly brackets — the prop- 
erties and values that define the visual effect to be applied. The stuff that 
appears inside the curly brackets is naturally more interesting, because 


233 


www.it-ebooks.info 


234 CHAPTER 7 New CSS language features 


that’s what lets you change the style 
- THERE'S AN INTRODUCTION TO : 
). CSS IN APPENDIX C. IF YOU DIDN'T of your pages. But being able to 


a KNOW ANY CSS BEFORE PICKING 
— UP THIS BOOK YOU SHOULD READ choose what elements your styles 


D THAT BEFORE PROCEEDING. affect is crucially important for the 
) whole thing to work. 


What is CSS3? 


CSS3 is the third major revision of the W3C CSS specification. Unlike the previous 
two revisions, CSS3 is divided into modules—instead of being one, long docu- 
ment like CSS1 and CSS2/2.1, there are currently more than 30 individual docu- 
ments that are part of CSS3. These are all allowed to progress and mature at their 
own rates; depending on the level of interest, some modules will progress to lev- 
el 4 before the level-3 work is completed. 


Like the term HTML5, the term CSS3 is often given a wider definition than just 
the specifications. Many of the features people consider to be CSS3 are actually 
in CSS2.1. 


CSS3 HAS MANY MORE TOOLS FOR SELECTING ELEMENTS, SO YOU'RE BETTER 
EQUIPPED TO KEEP YOUR MARKUP FREE FROM ELEMENTS, CLASSES, AND IDS 
THAT HAVE NO MEANING AND ARE ONLY THERE TO SUPPORT STYLING. IN THE 
NEXT SECTION, YOU'LL SEE SOME COMMON DESIGN PROBLEMS AND LEARN 
HOW CSS3 SELECTORS MAKE SOLVING THESE PROBLEMS EASY. 


Choosing elements through their relationships 


Here are screenshots of three popular websites, showing three differ- 
ent but common design requirements. 


Car Hire Reservations 
RACE TIME Online Check-in 
13348412 Pope. 
Locations 
Lakes and mountains Vehicle Guide 
age holidays Products & Services 
Van Hire 
#1 Club 


Car Hire Partners 


Customer Support 
Alternating table rows have a Links to the current page or The first and last elements 
different style. section have a different style. have a different style. 
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Using traditional approaches, you would have to apply classes to each 
element. For the previous three examples, the code would be some- 
thing like the following, where the class names don’t add any further 
meaning to the markup —they just make explicit relationships that аге 
already present: 


<table> <ul> <ul> 
«tr class="odd"> <li> <li class="first"> 
<td></td> <a href="/home" top + right border 
</tr> class="current"> «/li» 
«tr class="even"> Home «li» 
<td></td> </a> right border 
</tr> <a href="/other"> «/li» 
</table> Other «li class="Last"> 
</a> bottom + right 
</li> border 
</ul> </li> 
</ul> 


In CSS3, thanks to all the new selectors available, you can take advan- 
tage of those relationships directly with no need to add extra class attri- 
butes. In this section, you'll learn about the key ways of selecting 
elements with CSS combinators and pseudo-classes. 


Selecting sets of elements with combinators 
Combinators allow you to chain simple selectors together. They’re the 
workhorses of CSS. The following diagrams show a simple HTML 
fragment as a tree structure and then highlight the elements that the 
different rules select using the common CSS2 combinators. 


USER FRIENDLY by J.D. "Illiad" Frazer 


I THOUGHT THIS BOOK WAS 
ABOUT NEW STANDARDS. WHY ARE 
WE TALKING ABOUT С552? 


BUT POPULAR WEB BROWSERS | TALKING ABOUT YOURSELF OR 
DO NOT FULLY SUPPORT C552. | rego 


/ HEY / I MAY BE OLD, BUT 
I'M FULLY COMPATIBLE 
; WITH MODERN STYLE/ 


С592 IS ANEW 


COPYRIGHT ©2008 2.0. "Wand" Frazer MITP://WWW.USERIRICNOLYORG/ 
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ORO, 6 ә © ® 


<article> article p {} article > p {} 
<p></p> : 
<p></p> A space is the The greater-than 
<section> descendant combina- symbol is the child 
<p></p> tor, selecting any p combinator, selecting 
<p></p> that is a descendant only the p elements 
</section> 


: of an article element. that are direct chil- 
«/article» 


dren of an article. 


FIRST WE'LL LOOK AT THE ADJACENT-SIBLING COMBINATOR. IT WAS INTRODUCED 
IN С5521, BUT IT ISN'T SUPPORTED BY IE6 OR 7 AND SO HASN'T BEEN WIDELY USED. 
IT SELECTS AN ELEMENT THAT IMMEDIATELY FOLLOWS ANOTHER ELEMENT. 


THE ADJACENT-SIBLING COMBINATOR 


Rather than use tree diagrams to illustrate the =---------------- | 
new selectors, we'll use this simple document: | HEADER 1 


«header» Vemm m m m NM mM M M UE в i 
<h1>Header</h1> 

</header> 

<article> 
<hi>Article</h1> 
<p>Paragraph 1</p> l22aessedewsesoms d 
<p>Paragraph 2</p> 1 BODY FOOTER ' 
<footer>Article footer</footer> 

</article> 

<footer> 
Body footer 

</footer> 
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The complete listing is available in ch07/sibling- 
combinator-1.html. 


This rule selects any paragraph elements that oe ы F 

immediately follow a level-one heading element: — : ^722& ' 
| 

hi + p { background-color: #000; } diro PNIS 21 
1 1 quote ка 

You can see in the screenshot that only the first Mu UR T ' 

paragraph is selected. The + is known as the aaa ale E a 

adjacent-sibling combinator. This example is from 

ch07/sibling-combinator-1a.html. 

The target element is always listed last. This Е | 

rule has no effect because there are no para- i ien 

graph elements immediately after footer ele- LC E 

ments: rin ros RR 2 
——— - 

footer + р { 

background-color: #000; 

H 

Switch the two simple selectors around, and you — 5777777777777 

can see that there are footers that follow para- i нав 

graphs: p PARAGRAPH 2 i 


p + footer { 
background-color: #000; 
} 


See the files sibling-combinator2a.html and sibling-combinator2b.html 
in the ch07 folder for these two examples. 


THE ADJACENT-SIBLING COMBINATOR IS USEFUL FOR SITUATIONS WHERE YOU MIGHT 
WANT TO ALLOW A DIFFERENT AMOUNT OF SPACE DEPENDING ON WHAT THE PREVIOUS 
ELEMENT WAS. FOR EXAMPLE, IF YOU HAVE A HEADING DIRECTLY AFTER A PARAGRAPH, YOU 
WANT TWO LINES OF SPACE. A HEADING THAT FOLLOWS ANOTHER HEADING NEEDS ONLY 
ONE LINE OF SPACE, BUT THE ELEMENTS HAVE TO DIRECTLY FOLLOW ONE ANOTHER. AA 
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THE GENERAL-SIBLING COMBINATOR 


Suppose another element is inserted 
between the paragraph and the footer, like 


this: 


<p>Paragraph 2</p> 

<img src-"example.png"» 

<footer>Article footer</footer> 

The footer is no longer selected by p + 
footer because it doesn’t immediately follow 


the paragraph. 


WHAT ARE WE DOINK? 


TRYING TO 


FOR SITUATIONS WHERE THE ELEMENTS YOU WANT TO SELECT WILL SHARE 
THE SAME PARENT AS ANOTHER ELEMENT, ВИТ NOT NECESSARILY BE 


"Pd DIRECTLY ADJACENT, CSS3 OFFERS THE GENERAL-SIBLING COMBINATOR. 


CZ 


GENERAL-SIBLING jms: 


-------- а. 


ADJACENT-SIBLINÓ 
{ COMBINATOR 
duced idis ы T 


! һ1+р{ 
ns ^ d background-color: £000; 
} } 


| SELECTS <p> ELEMENTS 
л 1 THAT DIRECTLY FOLLOW 


р SELECTS ANY «p»  ' HEADER 
— Е ELEMENT THAT FOLLOWS! 


“= A AN <h1> ELEMENT WITH se ee se 


сше шй THE SAME PARENT 


COMBINATOR ‚+ 


pt 


" background-color: #000; анын а ЖЕҢЕ ЫДА ЫЕ 
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<header> 
<h1>Header</h1> 
</header> 


HTML. Instead of an article <article> 
footer, a blockquote element and a <h1>Article</h1> 


third paragraph have been 


added. 


Browser support quick check: 


combinators 


@©oo€9 


1.0 1.0 


1.0 1.0 


<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
<blockquote>Quote</ 
blockquote» 
<p>Paragraph 3</p> 
«/article» 
«footer» 
Body footer 
«/footer» 


Elements targeted by the general- 
sibling combinator have to occur 
after the elements targeted by the 
preceding selector in the document. 
Compare the results of these two 
rules. There are three paragraphs 
after the h1, but only one of those is 
after the blockquote. 


gum tm m m m m mn и аә аз "2 ee io adag "2 
LI 
ARTICLE | ARTICLE 
LI 
! М V PARAGRAPH 1 i 
I 1 L П 
мыи , 1 PARAGRAPH 2 í 
yg quem чо! к == ош ш ш eae н чо! 
1 1 quote ба 1 1! Quote ба 
1 bem ------- ое з |! lI Ыл. ---- е-е = з 1 
Ш Е | DNE RR | 
1 П ' L 
Ье е е е а а е оа оз ав в о аа ав EI [———————— == EI 
| dinde теввеяенЕе л quem шеш игш te л 
| BODY FOOTER ' | BODY FOOTER ' 
Lil: seamen 4 [ИЧЕ лүү ы инни 4 
hl ~ p { blockquote ~ p { 
background-color: #000; background-color: #000; 
} } 
Listing: ch07/sibling-combinator-1b.html Listing ch07/sibling-combinator-1c.html 
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THE REASON ONLY THE ELEMENTS AFTER THE blockquote ARE AFFECTED 
IS THAT THE BROWSER RECEIVES THE WEB PAGE AS A STREAM, ONE 
CHARACTER AT A TIME, AND APPLIES STYLES AS IT GOES ALONG. IT 
TRIES TO AVOID GOING BACK AND RESTYLING ALREADY-RENDERED 
ELEMENTS, BECAUSE DOING SO IMPACTS PERFORMANCE. 


YOU'VE JUST LEARNED ABOUT CSS3'S NEW COMBINATORS, BUT CSS3 ALSO PROVIDES 
SEVERAL PSELIDO-CLASSES FOR TARGETING ELEMENTS ACCORDING TO THEIR RELATIVE 
P POSITION IN THE DOM. PSELIDO-CLASSES ACT AS MODIFIERS TO SIMPLE SELECTORS- 
SO INSTEAD OF SELECTING ALL THE PARAGRAPHS, YOU CAN SELECT JUST THE FIRST 
ONE, OR JUST THE LAST ONE, OR EVERY THIRD ONE. IN THE NEXT SECTION, YOU'LL 
LEARN HOW TO USE CSS3 PSELIDO-CLASSES TO SOLVE COMMON DESIGN PROBLEMS. 


Selecting among a set of elements with pseudo-classes 


Combinators allow you to select all elements that fit a particular rela- 
tionship. But what if you don’t want to select all of the <p> elements 
that are descendants of an <article> element for the same styling? Or 
all the rows of a table? CSS pseudo-classes allow you to select the first 
element, the last element, or a subset of the elements according toa 
pattern. They remove the need to add classes to your markup for 
purely stylistic purposes. Before you learn about pseudo-classes, let's 
consider what you would need to do if pseudo-classes didn’t exist, and 
why that’s not good practice, with a couple of examples. 


The IE6 problem 


IE6 is the most successful browser of all time in terms of market share, manag- 
ing as much as 90% market share in its heyday. Unfortunately, it’s missing sev- 
eral key features of CSS2.1. 


The ubiquity of IE6 allowed many organizations to get away with shortcuts in 
web app development. The result is that they have since been stuck with expen- 
sive-to-replace applications that only work on IE6. It’s impossible to upgrade the 
web browser without first replacing all those applications—a slow process. The 
end result is that several CSS2.1 features couldn’t be used on most websites un- 
til recently, one of which is pseudo-classes. 


In the old days (you know, around 2005) when IE6 was predominant, the only 
way to do this consistently was to add classes all over your HTML that anticipated 
the styling you wanted. With CSS2.1 and CSS3 approaching 90% browser sup- 
port, you should now be doing this with pseudo-classes. 
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SELECTING THE FIRST AND LAST ELEMENT 


Styling the first element of any set 
differently is common on the web 
today. This blog renders the first 
paragraph in a larger font to make 
it stand out. 


The old way to approach this was 
to explicitly add a class to the first 
paragraph: 
<h1>Heading</h1> 
<p class="first"> 

First paragraph... 
</p> 


This blog goes even further —the 
first post is styled differently than 
the other posts previewed on the 
home page. The first post takes 
up the full width and is divided 
into columns; the rest of the posts 
are in a single column further 
down. Again, the usual approach 
to this is to add a class in the 
markup: 


«div class="post first"> 
<hi>Post 1</h1> 
<p>... 

</div> 

<div class="post"> 
<h1>Post 2... 


For details on CSS columns, 
check out chapter 11. 


[уре Reviews. Books. Commentary 


Making Geometric Type Work 
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CLASSES ARE AN HTML ATTRIBUTE, NOT A CSS WE'RE APPROACHING IVORY-TOWER TERRITORY 
ONE. ALTHOUGH THEY OFTEN PROVIDE НЕКЕ-МОЅТ OF YOUR USERS WON'T CARE HOW THAT 
CONVENIENT HOOKS FOR FIRST ELEMENT IS PICKED OUT. BUT 
APPLYING CSS STYLES, THEIR THERE ARE BENEFITS TO NOT LOADING 
ROLE SHOULD BE TO GIVE YOUR MARKUP WITH PRESENTAT IONAL 
ADDITIONAL SEMANTIC CLASSES: SMALLER FILE SIZES; =~ | 
I INFORMATION ABOUT CLEANER, MORE EASILY | (D) \ 
ҮОЦК СОМТЕМТ. ТНАТ 25, UNDERSTANDABLE MARKUP; AND —~ J i 
МА THEY SHOULD DESCRIBE WHAT LESS REWORK WHEN YOU DECIDE = 
YOUR CONTENT 25 NOT WHAT (FOR EXAMPLE) TO REMOVE THE 4 
| \ IT LOOKS LIKE. THIRD ELEMENT OF ALIST YOU WANT 


TO STYLE IN ALTERNATING COLORS. 


For the next few examples, we'll use a markup fragment in a style 
that’s commonly used for site navigation—an unordered list of links. 
The screenshot shows some default styling, putting a dotted outline 
around each major element so you can see where it is. 


<nav> 
«ul» 
«li» 
<a href="#item1">Item 1</a> 
</li> 
<li> 
<a href="#item2">Item 2</a> 
</li> 
<li> 
<a href="#item3">Item 3</a> 
</li> 
<li> 
<a href="#item4">Item 4</a> 
</li> 
<li> 
<a href="#item5">Item 5</a> 
</li> 
<li> 
<a href="#item6">Item 6</a> 
</li> 
</ul> 
</nav> 


To select the first element in the list with- 
out adding additional markup, you can use 
the :first-child pseudo-class: 
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ul li:first-child { p--------------- 1 
background-color: #000; | eae EP 
LI LI 
-—-— 
LI |———— l ' 
This selector is saying, “Select the <li> ele- 1! d meh Ж І 
ments that аге the first child of their Co bI 4:11 
: ” l 4 ! mme б! 
respective <и1> elements. ЖЫ Em a £j 
Selecting the last element is also straight- Loe m a 
forward with the :1ast-child pseudo-class: EL ier 
BEN ЗНН n 
ul li:last-child 1 i? ерене еш сш A" 
L| L| 
background-color: #000; pog ITEM S a 
tle = =- ew ew ewe = = == =~ 1 
| a: 
This selector is saying, "Select the <li> ele- бр HE 
б а Ng. emu mmc m m m n 1 
ments that are the last child of their <ul> EE ET nels E 4 


parent elements.” 


YOU DON'T HAVE TO APPLY THESE PSELIDO-CLASSES TO A PARTICULAR 

ELEMENT. THEY CAN BE LISED STANDALONE. SEE IF YOU CAN WORK OUT WHICH 

ELEMENTS THIS CSS RULE WILL SELECT. THE ANSWER IS FURTHER DOWN: 
SP 


ul :last-child { background-color: #000; } 


i | 
Pseudo-classes can be used with descen- dee о _ on: 
dent or child combinators like any other D! зоне Met EM 
. ä е ITEM! 1 
simple selector. Compare this with the pre- 4 D ETE. 
vious example: Aa E... 1! 
time... O Ж. 
li:last-child { а E 
background-color: #000; : i 1 тема À : 
0 ee ee E 
} Ж basses sees ii! 
li:last-child a { ME e EET ai! 
background-color: #fff; ^ i LAN ; І 
} б Seperate a! 
К „= = a а ов ов аа а в > а am 4 


The extra rule selects all «a» elements that 
descend from an <li> element that is a last 


child. This rule has been used to make the 
link visible. 
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SELECTING AN ELEMENT BY ITS ORDERING 


What if you don’t want to select just the A 21 
first or last child? With :nth-child you can E eee б, 
. . " 1 1 ' 1 
easily select specific elements by specify- pessssss or 3 
ing a numeric parameter: Ig ies сае ER. 
' ! ! LI 
li:inth-child(3), li:nth-child(5) + 7 ыссы E 
background-color: 2000; н rem : i - 
} 1 : йә = == == = = : 1 
|| и 

. . LI LI 
The :first-child pseudo-class is just a BP debi e ИШЕ 
. . . i ! | пене DL I 
more intuitive way of saying :nth- En priced ~ 
child(1). резне уц 4 


OFTEN YOU WANT TO SELECT, NOT INDIVIDUAL ELEMENTS OUT OF A SET, BUT A SUBSET 

OF THE ELEMENTS ACCORDING TO SOME REPEATING PATTERN. A COMMON EXAMPLE IS 
— LARGE TABLES OF DATA IN WHICH IT'S HELPFUL TO GIVE THE ROWS ALTERNATING 

BACKGROUND COLORS TO AID THE EYE AS IT TRACKS ACROSS THE VALUES. 


init m Omo ERSSIATSRAIRGbIS|) Browsers Unknown Тош 


[- usma i X 17110 484 38 59 84 65 
— X 16/11/10 455 39 61 25 5% 
=O Ex Ж 15/11/10 456 29 ы 14 563 
Чі trono Ж. X 14/11/10 479 37 55 4 62 
hef canava 35 X1xiv10 474 22 47 її 5и 
Will sour wwa ы и aa X 12/11/10 460 30 46 29 583 
Bie M T ETT X1viv10 451 24 50 45 570 
X 10/11/10 429 32 331 45 837 
ев: саа ДЫ. Ж оолло 426 35 73 29 573 
UM SINGAPORE X ов/11л1о0 421 з1 52 46 550 
Т Л пою м з 07/11/10 436 33 75 35 579 
«сопло SES ae 0611/10 416 31 43 18 508 
= 05/11/10 am 18 52 эз 500 
P ew zenro А.ж E. X 041110 482 42 67 60 651 
= ЕЕ OE AES Se Xoxivi0 471 15 59 эз 578 
=j- ноятнеян IRELAND зз 4 1 Total 7167 478 1215 615 0475 
D злмол XN We EU 
aid WALES. 2 тию 1 
DES E E ? 
РАКТАН s 3 4 
These examples were taken from «table» 


«tr class="odd">... 
«tr class="even">... 
«tr class="odd">... 


the 2010 Commonwealth Games 
website (left) and the admin pages 


of my own blog (right). The «tr class="even">... 
markup for the two is remarkably «tr class="odd">... 
similar — each gives a specific class «tr class="even">... 


to each <tr> element in the table. 
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You could use :nth-child(1), :nth-child(2), :nth-child(3), and so on to 
apply a style to each row in the table in order, but that would be as 
much work as adding a class to each row. Instead of specifying a num- 


ber as the parameter to :nth-child, you can specify a pattern. Let's look 


at that next. 


To select every second element, use the 
pattern 2n: 
li:nth-child(2n) { 
background-color: #000; 
} 


If you imagine that all the elements are 
numbered in order, this selects all the <1i> 
elements with a number that matches the 
pattern 2n for whole number values of п. 


Selecting the odd-numbered children this 
way looks a little more complex but follows 
the same pattern: 
li:nth-child(2n-1) { 

background-color: #000; 
} 


The odd-and-even requirements are so 
common that there’s a shortcut keyword 
for each. This creates a red-and-blue 
striped list: 
li:nth-child(odd) { 

background-color: #f00; 
} 
li:nth-child(even) { 

background-color: #006; 
} 
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SELECTING FROM THE END BACKWARD 


You don't have to select from the top 
down. You can select from the bottom up 
with :nth-last-child. It works in the same 


;. 1 
' 
' 
1 
1 
1 
П 
1 
П 
' 
1 


way as :nth-child: 


background-color: #000; 


La 


I 
П 
' 
I 
LI 
: 
li:nth-last-child(2n) { н 
L] 
I 
I 
L] 
I 
L] 


} 

The hypothetical values for n extend to Bh ene ee Aes i 

2 А ani TTE т 
negative numbers, as сап be seen if you i ' MN : 
. LI П 
try this: | wee i 
1 ' ' Em2 gy 
li:nth-last-child(2n«2) { | mme mm cai a) 
background-color: #000; б, ые Pt 
} i ү rsess= bor ' 
i! ! rrem4 8d. 
А O "HE 
You'll notice that 2n+2 has results identical a Dr d E 
Жее еуен am T. 
to 2n and to 2n-2. 3. "ete f И. 
MENSIS FEE ат; 
| анаа ава аз а васла: авга a в-ж all 


But if n is negative, different rules apply. 
Now n will count backwards from the 
elements you see; if there are six elements 
it will count six back. So adding a fixed 
number to it will move the range of 
selected elements so that it selects that 
number of visible elements. This selector 
will target just the first three elements: 


li:nth-child(-n«3) { 
background-color: #000; 


} 
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The same trick works with :nth-1ast-child 
except, as with last child, the counting is 


from the end of the set of elements up. This 
selects just the last two odd-numbered 


items: ee а 
li:nth-last-child(-2n4«4) { Ирон 
background-color: #000; Pond . 
} 
MORE COMPLEX SELECTION PATTERNS 
If you increase the number in front of n, Г M pueda ee 1 
epeen SIS А 
then the pattern extends over more ele- (| necem ДЕ 
. . TRE (T TAE 
ments. This rule selects the middle element pt ln a!la 
out of each set of three: : : МЕЕ i : 
T4424: zm 
li:nth-last-child(3n-1) { Ra РЕ В, 
background-color: #000; : gpem | i : 
1 : be ww ow ww ww mm Е : П 
| EE о о Шш 
. . LI L 
Of course, this still targets only one ele- poire me em Erg 
: a ITEM6 ба, 
ment out of every three. You'd need an ' t E ы = E ' 
с н ens mm ' 
extra rule if you wanted a pattern ABC L--------------- E 
instead of ABA. 
Now the answer to the mini-quiz AJ posed со 3 
А ; . А Poo tee 1 
earlier. Here's the code again. The result is o! Pt n ty 
shown in the screenshot: i rr 
= rit 
ul :last-child { кор Беш еш ы кг Hjo 
background-color: #000; : а i = ot i 
1 ааа 1 
} EL ri! 
lI ыыы» = = 1 
Did you guess right? Without specifying i - o r1 
à І. ооо о е е е е о «і 
that only <11> elements that were last chil- б, е] o! 
' П 
dren should be styled, the rule now selects i 1 З i 
any element that is a last child. The <a> Сон a a 4 


elements are all the last child of their 
respective parent «1i» elements. 
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You may be thinking to yourself that there 
are a few situations in which you would 
like to select elements that are both first 
and last child, like the links in this example. 


New CSS language features 


You can do this by combining the two 


pseudo-classes: 


ul :first-child:last-child { 
background-color: #000; 


} 


This rule selects elements that are both a 
first and a last child and are descendants of 
the <ul> element. It’s a bit of a mouthful, 
though, so fortunately there’s an alternative 


pseudo-class that has the same effect: 


ul :only-child { 
background-color: #000; 


} 


Browser support quick check: 
child selectors 


:first- :last- :nth/:nth-last 
child child child/of type 
е 10 10 1.0 
е 1.0 1.0 3.5 
a 7.0 9.0 9.0 
О 70 9.5 10.10 
@ 1.0 1.0 3.0 
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SELECTING BY TYPE OF ELEMENT 


Sometimes, if the structure is likely to 
vary, the element you want to select isn’t 
consistently the first or last (or second or 
third) child. Here each article has a pic- 
ture, but it’s located in a different place in 


each one: 


<header> 
<hi>Header</h1> 
</header> 
«article» 
<hi>Article 1</һ1> 
<img src="example.png"> 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
«/article» 
«article» 
<hi>Article 2«/h1» 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
<img src-"example.png"» 
«/article» 
«footer» 
Body footer 
«/footer» 


How would you write a selector for the 
last paragraph of each article? Or could 
you select the first article? Let's try using 
ifirst-child and :last-child: 


article:first-child { 
background-color: #000; 

} 

p:last-child { 
background-color: #000; 

} 


As the screenshot shows, these rules have 
no effect. The naive solution fails because 


neither <article> nor <p> is the first child 
of any container. 
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The first article is the second element on the page. You could select it 
with article:nth-child(2), but that would be a fairly fragile solution — it 
would break if someone decided to add an advertising banner between 
the header and the first article. Each article starts with an <hi>, but 
then one article leads with a picture, and the other leads with a para- 
graph. In this case, p:nth-child(2) would only select the last paragraph 


in the first article. 


It's for situations exactly like these that 

we have the :first-of-type pseudo- 

class: 

article:first-of-type { 
background-color: #000; 

} 


This selector will always apply to the 
first article element on the page, as well 
as any other first article elements fur- 
ther down the tree. Note that the image 
isn’t transparent so you can’t see the 


background behind it. 


The 1ast-of-type pseudo-class works in 
the same way, except in reverse: 
p:last-of-type { 

background-color: 2000; 
} 


If you don’t want the last or the first, or 
you want to style according to a pattern, 
you can use :nth-first-of-type and 
:nth-last-of-type. This work in the 
same way as :nth-child except that the 
only elements that take part in the count 
are those specified by the simple selec- 
tor to which you apply the pseudo-class. 
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YOU NOW KNOW ALL THERE IS TO KNOW ABOUT CSS3 SELECTORS BASED ON THE 
STRUCTURE OF THE DOCUMENT, BUT THERE'S MORE TO CSS3 THAN THAT. IN THE NEXT 
SECTION YOU'LL LEARN ABOUT SELECTING ELEMENTS BASED ON THEIR ATTRIBUTES. NN 


Choosing elements by their attributes 


You should by now be aware that CSS provides convenient shorthand 
for selecting elements according to their class and ID. But class and ID 
are just two of many attributes that can be applied to HTML elements. 
Here are some common scenarios with another common attribute, the 
href on links. 


e Sketch of the Analytical Engine Invented by 29. ^ “PDF Referencem Sixth Edition, version 1.7 
Charles Babbage, Esq. @ with notes by trans. Ada table 5.11") 
Lovelace, in Scientific Memoirs, Vol 3 (1842) 


Different styling for Different styling Different styling for 
external links for an element file downloads 
based on the URL 


If you were using HTML4 and IE6-compatible CSS2, you'd probably 
implement these examples by adding an explicit class to the elements 


concerned: 
«a «a «a 
class-"external" class="home" class="pdf" 
href="http://site.com/ href="/home"> href="doc.pdf"> 
"> Ноте Download document 
Visit site </a> </a> 
</a> 


In these examples, the class attribute is really just duplicating informa- 
tion available in the href attribute. Whenever there’s duplicate informa- 
tion, there’s an opportunity for the two sets of information to get out of 
sync. For example, what if the document in the third example changes 
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п= | *$*- 
2 е 1.0 1.0 
о 
Ф 
dz 
5р 
$2 е 1.0 2.0 
59 
to 
2g Q 7.0 7.0 
о. 5 
EE 
2E 
Ф с 
E 70 9.0 
3 О 
9 
a 
Ө 1.0 1.0 


from a PDF to а Word document, so ѕоте- 
one updates the link but forgets to update 
the class? The link would be styled as a 
PDF, but it would actually be a Word doc- 
ument. Wouldn’t it be handy if there was 
some way you could select elements based 
on those other attributes rather than rely- 
ing on classes and IDs? 


CSS3 makes it possible to write selectors 
that target these elements based on the 
values in the href attribute; these are 
called attribute selectors. One excellent 
opportunity to use attribute selectors is 


microdata. Remember the sample hCard from chapter 2? Here’s the 


listing again. 


THE FOLLOWING EXAMPLE HAS BEEN CHOSEN BECAUSE IT PRESENTS LOTS OF SUITABLE 
ATTRIBUTES TO DEMONSTRATE STYLING. BUT, BECAUSE MICRODATA CAN ALSO BE 
REPRESENTED ENTIRELY ON INVISIBLE meta ELEMENTS, THIS ISN'T NECESSARILY A 
GOOD GENERAL-PURPOSE APPROACH FOR STYLING UNKNOWN MICRODATA MARKUP. 


O2 
| \ 


<section id="rob" itemscope 


itemtype="http://microformats.org/profile/hcard"> 
<h1 itemprop="fn">Rob Crowther</h1> 


ny n" 


«p itemprop="n" itemscope>Full name: 
«span itemprop="given—name">Robert</span> 
«span itemprop="additional-name">John</span> 
«span itemprop="family—name">Crowther</span> 


</p> 


«p itemprop-"org" itemscope> 
«span itemprop-"organization-name"»Manning Publications Co.</span> 
(«span itemprop="organization-unit">Hello! Series</span>) 


</p> 


</section> 


This is what it looks like with no styling ROB CROWTHER 


applied. Although you could apply 


FULL NAME: ROBERT JOHN CROWTHER 
MANNING PUBLICATIONS CO. (HELLO! SERIES) 


classes to various elements to attach 


styles, you can use the various item* 
attributes instead. 
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The simplest attribute selector is called 
the existence selector: 
[itemscope] { 


outline: 4px dashed black; 
} 


When you put the attribute name inside 
square brackets, the selector will match 
any element that has the attribute. 


Attribute selectors can be appended to 
other simple selectors. To select only 
paragraphs that have an itemscope 
attribute, use this selector: 
p[itemscope] { 


outline: 4px dashed black; 
} 


Although attribute existence can be 
useful occasionally, it’s more likely you'll 
be interested in selecting between 
attributes with values. The syntax for 
this is intuitive: 

[itemprop="org"] { 


outline: 4px dashed black; 
} 


Note that three elements have an 
itemprop attribute that begins with the 
letters org, but only the one that exactly 
matches has been selected. It's possible 
to select the elements whose attribute 
begins with org: 
[itemprop^-"org"] { 

outline: 4px dashed black; 

display: block; 
H 
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ROB CROWTHER 


! SERIES) 


ROB CROWTHER 


FULL NAME: ROBERT JOHN CROWTHER 


! SERIES) 


ROB CROWTHER 


FULL NAME: ROBERT JOHN CROWTHER 
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Similarly, you can select all the elements 
whose itemprop attribute ends with a 
particular value: 
[itemprop$-"name"] { 

outline: 4px dashed black; 

display: block; 
} 
In the examples so far, the attribute 
value you're trying to match is a 
simple string, so quotes are optional. 
You could also write this selector as 
[itemprop$-name]. If the value you're 
matching contains characters other 
than letters and numbers, then the 
quotes are required. 


If the significant part of the attribute 
value is in the middle rather than at the 
start or the end, there's also an attribute 
selector for that: 
[itemprop*="tion"] { 

outline: 4px dashed black; 

display: block; 
} 
This rule matches any element which 
has an itemprop property with a value 
which contains ton somewhere 
within it. 


ROB CROWTHER 


ROB CROWTHER 


FULL NAME: ROBERT 


YOU CAN NOW WRITE SELECTORS THAT MATCH ALL THREE 


EXAMPLES YOU SAW AT THE START OF THIS SECTION: 


SPECIFIC URLS: a[href="/home"] 


FILE DOWNLOADS: a[href$=".pdf"] 
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EXTERNAL LINKS: a[href^z"http://"] 
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The traditional CSS ID selector can now be seen as syntactic sugar for 
the attribute selector. These two selectors are equivalent: 


#myid [id-"myid"] 


But the class selector is slightly more difficult. What attribute selector 
we've considered so far would be equivalent to .myclass? Let's consider 
some options. 


Attribute selector Matches Doesn't match 
[class-"myclass"] class-"myclass" class-"myclass 
otherclass" 
[class^-"myclass"] class-"myclass class-"otherclass 
otherclass" myclass" 
[class*-"myclass"] class="otherclass 
myclass" 
class-"notmyclass" 


It's clear that there's a gap in our toolkit. Fortunately, CSS3 fills this 
hole: [class~="myclass"] selects an element with a whitespace-separated 
list of values, one of which is myclass. 


Attribute selector Matches Doesn't match 
[class--"myclass"] class-"myclass" class-"notmyclass" 
class-"myclass 
otherclass" 


Choosing what isn’t 


So far, we've concerned ourselves with positive identification. We've 
selected the elements that are the first child, and we've selected ele- 
ments that have a particular attribute. But CSS3 also gives us the abil- 
ity to select elements that aren't the first child or don't have particular 
attributes, with the :not pseudo-class. To understand how this might be 
useful, consider how you might lay out a form: 
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<Label>Text: 

<input type="text"> 
«/label» 
<label>Range: 

<input type="range"> 
«/label» 
<Label>Radio: 

<input type="radio"> 
«/label» 
<Label>Checkbox: 

<input type="checkbox"> 
«/label» 


It looks a little disorganized, so let's 
add some styles to make things more 
consistent: 
input 1 

margin: 1em; 

display: block; 

width: 12em; 
} 


КАМОЕ: 


Clearly you want to apply different styles to input elements of type 


radio and checkbox. By selecting positively, you have two basic options: 


select everything and then override (following, left), or explicitly select 


only the items you want to style (following, right): 


input { input { margin: lem; } 
margin: lem; input[type-text], 
display: block; input[type-search], 
width: 12em; input[type-tel], 

H input[type-url], 


input[type-radio], 
input[type-checkbox] 1 


input[type-email], 
input[type-password], 


display: inline; input[type-datetime], 
width: auto; input[type-date], 
H input[type-month], 


input[type-week], 
input[type-time], 
input[type-datetime-local], 
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input [type=number], 
input [type=range], 
input[type-color], 
input[type-file], 
input[type-submit], 
input[type-image], 
input[type-reset], 
input[type-button] { 
display: block; 
width: 12em; 
} 


The : пої pseudo-class allows you to be more succinct than either of 
those two examples: 


input { margin: lem; ) 2 2 111111 1 7-7-7-7--7-7--------7-- 


x l TEXT: : 

input:not([type-checkbox]) : not([ : : 

type-radio]) { nm " 

display: block; width: 12em; і 

} 1 коо. 

! снєсквож ! 

L| L| 

You can also combine :not with other TPES i 

selectors you’ve seen in this chapter. Going o 1 
back to the :nth-child examples in the sec- ee | 
1 iTEM2 ' 


tion "Selecting among a set of elements 
with pseudo-classes,” this is how you select 
everything except the first two list items: 
li:not(:nth-child(-n-2)) { 


background-color: #000; 
} 


Pseudo-elemente 
Pseudo-elements are CSS selectors that allow you to style certain page 
elements as if an element existed in your markup. It sounds more 
complicated than it is, so let's dive into some examples. A common 
typographical feature, almost since the beginning of book publishing, is 
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Browser support quick check: 
pseudo-elements 


no ::first-letter/ 
е 1.0 1.0 
е 3.0 3.0 
ae 5.5. 5.5 
О 10.0 7.0 
© 1.0 1.0 


DROP CAPS 


to style the first line or first letter of a 
::first-Line section differently than the following 
text. Following are some examples both 
from history and the present day. 


SPECIAL FIRST- 
LINE FORMATTING 


к ou iy amc ice 
NEVER AM REALLY DX Уд mone ч 
DE "ы 


TM. asnes OF mewes 
М ALMOST EVERY MOTIN DODE тз TO one 
] GONPTATTON E ET HE 


IS mena 


BEOWULF MANUSCRIPT OPERA LOGICA, ARISTOTLE WEB BROWSER 


CIRCA AD 1000 CIRCA AD 1300 


AD 2012, ABOUT TEA TIME 


In order to achieve similar effects, CSS3 has the ::first-line and 
::first-letter pseudo-elements. To examine these, we need some suit- 
ably weighty prose to live up to our historical antecedents. I’ve chosen 
a selection of quotes from Ada Lovelace all marked up as paragraphs 


like this: 


<p>I never am really satisfied that I 
understand anything; because, understand 
it well as I may, my comprehension can 
only be an infinitesimal fraction of all 
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І NEVER AM REALLY SATISFIED THAT І UNDERSTAND 
ANYTHING; BECAUSE, UNDERSTAND IT WELL AS I MAY, 
MY COMPREHENSION CAN ONLY BE AN 
INFINITESIMAL FRACTION OF ALL І WANT TO 
UNDERST AND ABOUT THE MANY CONNECTIONS AND 
RELATIONS WHICH OCCUR TO ME, HOW THE MATTER 
IN QUESTION WAS FIRST THOUGHT OF OR ARRIVED 
AT, ETC. ETC. 
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I want to understand about the many 

connections and relations which occur to 
me, how the matter in question was first 
thought of or arrived at, etc., etc.</p> 


If you want to style the first line differently, what do you do? One 


option is to insert elements to signify the first line: 


<p><span class="first">I never am I NEVER AM REALLY 


really</span> satisfied that I SATISFIED THAT I UNDERSTAND ANYTHING: BECAUSE, 
understand anything; because, урн DE A apart en FATIN OE nee 
understand it well as I may, my poorer AD geras AAR TONE. 
comprehension can only be an HOW THE MATTER IN QUESTION WAS FIRST 


E ES А . THOUGHT OF OR ARRIVED АТ. ETC. ETC. 
infinitesimal fraction of all I want 


to understand about the many 
connections and relations which 
occur to me, how the matter in 
question was first thought of or 
arrived at, etc., etc.«/p» 


This looks OK in the example, but what if the user's screen is wider or 
narrower, or their font is larger, as in the following examples? 


І NEVER AM REALLY 5o mmr : I NEVER AM 


UNDERSTAND ANYTHING: BECAUSE, UNDERSTAND IT WELL AS I MAY, MY 


COMPREHENSION CAN ONLY BE AN INFINITESIMAL FRACTION OF ALL I REALLY oor: 

WANT TO UNDERSTAND ABOUT THE MANY CONNECTIONS AND 

RELATIONS WHICH OCCUR TO ME. HOW THE MATTER IN QUESTION UNDERSTAND ANYTHING; BECAUSE. 

WAS FIRST THOUGHT OF OR ARRIVED AT, ETC. ETC. UNDERSTAND IT WELL AS І MAY. MY 
COMPREHENSION CAN ONLY BE AN 
INFINITESIMAL FRACTION OF ALL I WANT 
TO UNDERSTAND ABOUT THE MANY 
CONNECTIONS AND RELATIONS WHICH 
OCCUR TO МЕ. HOW THE MATTER IN 


QUESTION WAS FIRST THOUGHT OF OR 
ARRIVED AT, ETC. ETC. 


Pseudo-elements vs. pseudo-classes 


Pseudo-elements create virtual elements within your document, as opposed to 
pseudo-classes, which rely on properties of the document entered by the author. 
In CSS3, pseudo-elements are distinguished by a double colon (: :) rather than 
the single colon of a pseudo-class. This differs from CSS2, where both used a 
single colon. 
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The :: first-line pseudo-element 
puts the onus of calculating what 
constitutes the first line of text on 
the browser: 
p::first-line { 

background-color: #000; 
} 


It applies styles as if there were an 
element wrapping all the text on the 
first line. But unlike a real element, 
you can't style children of the first 
line. The pseudo-element can only 
come as the last simple selector in a 
selector group. 


The ::first-letter pseudo-element 
is similar, except that it only selects 
the first letter: 

p::first-letter { 


background-color: #000; 
} 


Although the background has been 


styled in this example because it 
stands out in the screenshots, it 
would be more common to use a 
decorative font for the first letter, or 


to increase its size. 


UNDERSTAND ANYTHING: BECAUSE, UNDERSTAND IT 
WELL AS I MAY. MY COMPREHENSION CAN ONLY BE 
AN INFINITESIMAL FRACTION OF ALL I WANT TO 
UNDERSTAND ABOUT THE MANY CONNECTIONS AND 
RELATIONS WHICH OCCUR TO ME. HOW THE 
MATTER IN QUESTION WAS FIRST THOUGHT OF OR 
ARRIVED AT, ETC. ETC. 


VARIETY OF ARRANGEMENTS FOR THE SUCCESSION 
OF THE PROCESSES IS POSSIBLE. AND VARIOUS 
CONSIDERATIONS MUST INFLUENCE THE 
SELECTIONS AMONGST THEM FOR THE PURPOSES 
OF A CALCULATING ENGINE. ONE ESSENTIAL 
OBJECT IS TO CHOOSE THAT ARRANGEMENT 
WHICH SHALL TEND TO REDUCE ТО A MINIMUM THE 
TIME NECESSARY FOR COMPLETING THE 
CALCULATION 


BNEVER Ам REALLY SATISFIED THAT I 
UNDERSTAND ANYTHING: BECAUSE, UNDERSTAND IT 
WELL AS 1 MAY. MY COMPREHENSION CAN ONLY BE 
AN INFINITESIMAL FRACTION OF ALL I WANT TO 
UNDERSTAND ABOUT THE MANY CONNECTIONS AND 
RELATIONS WHICH OCCUR TO ME, HOW THE 
MATTER IN QUESTION WAS FIRST THOUGHT OF OR 
ARRIVED AT. ETC. ETC. 


IN ALMOST EVERY COMPUTATION А GREAT 
VARIETY OF ARRANGEMENTS FOR THE SUCCESSION 
OF THE PROCESSES IS POSSIBLE, AND VARIOUS 
CONSIDERAT IONS MUST INFLUENCE THE. 
SELECTIONS AMONGST THEM FOR THE PURPOSES 
OF A CALCULATING ENGINE. ONE ESSENTIAL 
OBJECT IS TO CHOOSE THAT ARRANGEMENT 
WHICH SHALL TEND TO REDUCE TO A MINIMUM THE 
TIME NECESSARY FOR COMPLETING THE 
CALCULATION. 


Using both ::first-line and ::first-letter, it's straightforward to cre- 
ate text that looks similar to the examples from the start of this section: 
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рі 
text-align: 
justify; 
clear: left; 
} 


p::first-letter { 
font-size: 400%; 
float: left; 
line-height: 1em; 
padding-right: 
0.1em; 


w 


p::first-line { 
font-size: 150%; 


Choosing elements based on user interaction 261 


NEVER AM REALLY 
SATISFIED THAT I 
UNDERSTAND ANYTHING: 
BECAUSE, UNDERSTAND IT WELL AS 


FRACTION OF ALL І WANT TO 
UNDERSTAND ABOUT THE MANY 
CONNECTIONS AND RELATIONS 
WHICH OCCUR TO ME, HOW THE 
MATTER IN QUESTION WAS FIRST 
THOUGHT OF OR ARRIVED AT, ETC. 
ETC. 


ARRANGEMENT S. FOR THE 


THE SELECTIONS AMONGST THEM 
FOR THE PURPOSES OF A 
CALCULATING ENGINE, ONE 
ESSENTIAL OBJECT 15 TO CHOOSE 
THAT ARRANGEMENT WHICH SHALL 
TEND TO REDUCE TO A MINIMUM 
THE TIME NECESSARY 
COMPLETING THE CALCULATION 


ANY PERSONS WHO 

ARE NOT CONVERSANT 

WITH MATHEMATICAL 
STUDIES IMAGINE THAT BECAUSE 
THE BUSINESS OF IBABBAGE'S 
ANALYTICAL ENGINE] 15 TO GIVE 
ITS RESULTS IN NUMERICAL 
NOTATION THE NATURE OF ITS 
PROCESSES MUST CONSEQUENTLY 
BE ARITHMETICAL AND NUMERICAL. 
RATHER THAN ALGEBRAICAL AND 
ANALYTICAL. THIS 15 AN ERROR THE 
ENGINE CAN ARRANGE AND COMBINE 
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ITS = NUMERICAL QUANTITIES 
EXACTLY AS IF THEY WERE 
LETTERS OR ANY OTHER GENERAL 
SYMBOLS: AND IN FACT IT MIGHT 
BRING OUT ITS RESULTS IN 
ALGEBRAICAL NOTATION WERE 
PROVISIONS MADE ACCORDINGLY. 


HE ANALYTICAL 

ENGINE HAS: NO 

PRETENSIONS WHATEVER 

TO ORIGINATE ANYTHING, 
IT CAN DO WHATEVER WE KNOW 
HOW TO ORDER IT TO PERFORM IT 
CAN FOLLOW ANALYSIS, BUT IT HAS 
NO POWER OF ANTICIPATING ANY 
ANALYTICAL REVELATIONS OR 
TRUTHS. ITS PROVINCE IS TO 
ASSIST US IN MAKING AVAILABLE 
WHAT WE ARE ALREADY ACQUAINTED 
WITH. 


Dynamic pseudo-classes allow you to assign different styles to ele- 


ments based on user activity. One of the best known of these is the 


:hover pseudo-class, introduced in CSS2, which lets you apply a differ- 


ent style to an element when the mouse pointer is hovering over it (see 


Browser support quick check: 
dynamic pseudo-classes 


Enabled/ Valid/ 

disabled/ invalid/ Target 

checked required 
е 1.0 10.0 10 
е 3.0 4.0 3.5 
e 9.0 10.0 9.0 
О 9.0 9.5 10.0 
Ө 3.0 5.0 3.0 


appendix С for some examples). 
CSS3 adds several new dynamic 
pseudo-classes. In this section, 
you'll learn about styling form 
elements based on their proper- 
ties. This will let you give cues 
to your users about the state of 
form elements—for example, 
whether they’re required or 
whether they’re currently valid. 
After that, you'll learn about the 
target selector that lets you style 
the page based on the current 
URL, which is useful for tabbed 
interfaces and slide shows. 
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Styling form elements based on state 


(9 | YOU SAW SEVERAL OF CSS3'S NEW DYNAMIC PSELIDO-CLASSES FOR 
\ HTMLS FORMS IN CHAPTER 3 WHEN YOU LEARNED ABOUT HTMLS 


\S/~ —™ FORMS. IN THIS SECTION, YOU'LL SEE THE FULL SET IN ONE PLACE. 


4 


) 


М2 


The first dynamic pseudo-classes we'll жо а UE E 


consider are :enabled and :disabled. Here 
are two text inputs, one of which is dis- 


DISABLED 
abled: 
—— ———— me 4 
«label-Enabled 
«input type="text"> 
«/label» 
«label»Disabled 
«input type-"text" disabled» 
«/label» 
Form elements are enabled by default, so TELE ME Л 
А А 1 ENABLED LI 
this rule targets the first input: С s 
L| 
input:enabled { : DESMILED ' 
outline: 4px solid #000; 1 А 
} | ——————— AL 
Most browsers make it fairly obvious ү л eal ala taal л 
. А 1 ENABLED L| 
when a form control is disabled, but the i ' 
. LI 
pseudo-classes allow you to add addi- DISABLED | 
. . I 
tional styling: х С ' 
LI 


input:disabled { 
outline: 4px solid #000; 
} 


If your form enables and disables controls 
dynamically based on user input, then 
enabled and :disabled allow you to attach 
transitions to the changes between the 
two states; see chapter 9 for further 
details. 
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Choosing elements based on user interaction 


The :checked and : indeterminate pseudo- 
classes can only be applied to inputs of 
type checkbox 


<label>Not checked 

<input type="checkbox"> 
«/label» 
«label»Checked 

<input type="checkbox" checked» 
«/label» 


As you might expect, :checked lets you 
style all checked check boxes: 
input:checked { 


outline: 4px solid #000; 
H 


You might use this to replace the default 
check box with a graphic. 


The indeterminate state has to be set by a 
script: 
input:indeterminate { 


outline: 4px solid #000; 
} 


Note that : indeterminate is independent of 


:checked—both checked and unchecked 


check boxes can be in the indeterminate state. 


You can also use CSS3 with the HTML5 
form features, such as validity. Here are 
one valid and one invalid form field: 


<label>Valid 
«input type-"url" 
value="http://manning.com"> 
«/label» 
<label>Invalid 
«input type-"url" 
value-"Not a URL"> 
«/label» 
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http.//manning.com 


INVALID 


[Not a URL 
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The pseudo-class for valid inputs is, 
unsurprisingly, : valid: 
input:valid { 
outline: 4px solid #000; 
} 


And the corresponding pseudo-class is 
invalid: 
input:invalid { 
outline: 4px solid #000; 
} 


It's also possible to style required inputs. 
Here are one required and one optional 
input (of course, inputs are optional by 


default): 


<label>Required 
<input type="text" required> 
«/label» 
<Label>Optional 
<input type="text"> 
</label> 


This is the CSS to select an input with the 
required attribute: 


input:required { 
outline: 4px solid #000; 
} 


And this is the CSS to target just the 


optional input: 


input:optional { 
outline: 4px solid #000; 
} 
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VALID 


http//manning.com 
INVALID 


Not a URL 


http.//manning.com 


INVALID 


Not à URL 
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Styling the page based on the target of the URL 


Fragment identifiers —a string after a # symbol—are often used to iden- 
tify sections within a long document, such as the table of contents at 
the top of a Wikipedia article. When the label in the fragment identifier 
matches an ID in the document, the browser scrolls the page down to 
where that element is displayed. 


IN AJAX APPS, THE CURRENT STATE OF THE APPLICATION IS OFTEN 
MAINTAINED THROUGH A FRAGMENT IDENTIFIER TO ALLOW EASY 
BOOKMARKING, AS IN THE FOLLOWING GMAIL URL. =, 


МА 
l | 


FRAGMENT --- 
HOSTNAME IDENTIFIER 


https://mail.google. com/mail/?shva=1#inbox: 


PROTOCOL PARAMETERS 


If the URL has a fragment identifier, then the element with the ID 
matching it can be given special styling with the :target pseudo-class. 
This is useful for slideshows and tab-based interfaces. 


This example uses four paragraphs, таа тано I LUE re аата, 
A ONLY BE AN INFINITESIMAL FRACTION OF ALL І WANT TO 
each of which has an id attribute: LADERST ND ABOUT THE ANY CONECT IONS MD RELATIONS НКИ 
OF OR ARRIVED AT. ETC. ETC. 
«p id="one">I never am really satisfied IN ALMOST EVERY COMPUTATION A GREAT VARIETY OF 
ARRANGEMENT S FOR THE SUCCESSION OF THE PROCESSES IS 
that...«/p» POSSIBLE. AND VARIOUS CONSIDERATIONS MUST INFLUENCE THE 
SELECTIONS AMONGST THEM FOR THE PURPOSES OF A CALCULATING 
<p id="two">In almost every computation вили ONE сони OEE тето аюое тит 
а </р> TIME NECESSARY FOR COMPLETING THE CALCULATION 
<p id="three">Many persons who are not STUDIES TANNE TRAE BECAINE THE RRSWESE OF meas 
ANALYTICAL ENGINE] IS TO GIVE ITS RESULTS IN NUMERICAL 
conversant... </p> NOTATION THE NATURE OF ITS PROCESSES MUST CONSEQUENTLY 
ВЕ ARITHMET ICAL AND NUMERICAL. RATHER THAN ALGEBRAICAL AND 
«p id="four">The Analytical Engine has WOTA pian at тоа изаа оча А. 
L LETTERS OR ANY OTHER GENERAL SYMBOLS: AND IN FACT IT MIGHT 
no pretensions... «/p» BRING OUT IT'S RESULTS IN ALGEBRAICAL NOTATION WERE 
PROVISIONS MADE ACCORDINGLY, 
1 1 1 1 THE TICAL ENGINE HAS NO PRETENSIONS ITEVER TO 
This is what the page looks like if you Тели шири И WO RETNO APERTO. 
. . . ORDER IT TO PERFORM ІТ CAN FOLLOW ANALYSIS. BUT ІТ HAS NO 
load it into your browser with a bare POWER OF ANTICIPATING ANY ANALYTICAL REVELATIONS OR 
TRUTHS. ITS PROVINCE IS TO ASSIST US IN MAKING AVAILABLE. 
WHAT WE ARE ALREADY ACQUAINTED WITH. 
URL: 


http: //host/target. html 
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This CSS selector says, “Add a black background to the paragraph ele- 


ments that are the target”: 
p:target { background: #000; } 


Now, if the URL is adjusted to contain a fragment identifier, the 
p:target rule is triggered. The following screenshots show the same 
page with two different fragment identifiers appended to the URL. 
When the fragment is #one, the element with id value one matches the 
p:target rule and has a black background. 


http://host/target.html#one http://host/target.html#three 


I NEVER AM REALLY SATISFIED THAT I UNDERSTAND ANYTHING: 
BECAUSE. LNDERST AND IT WELL AS 1 MAY. MY COMPREHENSION CAN 
ONLY ВЕ AN INFINITESIMAL FRACTION OF ALL I WANT TO 
UNDERSTAND ABOUT THE MANY CONNECTIONS AND RELATIONS WHICH 
OCCUR TO МЕ, HOW THE MATTER IN QUESTION WAS FIRST THOUGHT 
OF OR ARRIVED AT. ETC. ЕТС 


IN ALMOST EVERY COMPUTATION A GREAT VARIETY OF 
ARRANGEMENTS FOR THE SUCCESSION OF THE PROCESSES IS 


IN ALMOST EVERY COMPUTATION A GREAT VARIETY OF 
ARRANGEMENTS FOR THE SUCCESSION OF THE PROCESSES IS 
POSSIBLE. AND VARIOUS CONSIDERATIONS MUST INFLUENCE THE 
SELECTIONS AMONGST THEM FOR THE PURPOSES OF А CALCULATING 
ENGINE. ONE ESSENTIAL OBJECT IS TO CHOOSE THAT 
ARRANGEMENT WHICH SHALL TEND TO REDUCE TO A MINIMUM THE 
TIME NECESSARY FOR COMPLETING THE CALCULATION 


POSSIBLE. AND VARIOUS CONSIDERATIONS MUST INFLUENCE THE 
SELECTIONS AMONGST THEM FOR THE PURPOSES OF A CALCULATING 
ENGINE. ONE ESSENTIAL OBJECT IS TO CHOOSE THAT 
ARRANGEMENT WHICH SHALL TEND TO REDUCE ТО A MINIMUM THE 
TIME NECESSARY FOR COMPLET ING THE CALCULATION 


MANY PERSONS WHO ARE NOT CONVERSANT WITH MATHEMATICAL 
STUDIES IMAGINE THAT BECAUSE THE BUSINESS OF IBABBAGE'S 
ANALYTICAL ENGINE] IS TO GIVE ITS RESULTS IN NUMERICAL 
NOTATION THE NATURE OF ITS PROCESSES MUST CONSEQUENTLY 
ВЕ ARZTHMET ICAL AND NUMERICAL. RATHER THAN ALGEBRAZCAL AND 
ANALYTICAL. THIS IS AN ERROR THE ENGINE CAN ARRANGE AND 
COMBINE ITS NUMERICAL QUANTITIES EXACTLY AS IF THEY WERE 
LETTERS OR ANY OTHER GENERAL SYMBOLS: AND IN FACT IT MIGHT 
BRING OUT ITS RESULTS IN ALGEBRAICAL NOTATION WERE 
PROVISIONS MADE ACCORDINGLY. 


THE ANALYTICAL ENGINE HAS NO PRETENSIONS WHATEVER TO 
ORIGINATE ANYTHING. IT CAN DO WHATEVER WE KNOW HOW TO 
ORDER ІТ TO PERFORM ІТ CAN FOLLOW ANALYSIS. BUT IT HAS NO 
POWER OF ANTICIPATING ANY ANALYTICAL REVELATIONS OR 
TRUTHS, ITS PROVINCE IS ТО ASSIST US IN MAKING AVAILABLE 
WHAT WE ARE ALREADY ACQUAINTED WITH. 


THE ANALYTICAL ENGINE HAS NO PRETENSIONS WHATEVER TO 
ORIGINATE ANYTHING. IT CAN DO WHATEVER WE KNOW HOW TO 
ORDER ІТ TO PERFORM IT CAN FOLLOW ANALYSIS, BUT IT HAS NO 
POWER OF ANTICIPATING ANY ANALYTICAL REVELATIONS OR 
TRUTHS, ITS PROVINCE IS TO ASSIST US IN MAKING AVAILABLE 
WHAT WE ARE ALREADY ACQUAINTED WITH. 


CHANGING THE FRAGMENT IDENTIFIER DOESN'T RELOAD THE PAGE, SO THE 
: target PSEUDO-CLASS MAKES IT EASY TO CREATE TABBED INTERFACES 
LIKE THAT IN THE NEXT EXAMPLE. 


OZ 


You can adjust the CSS from the previous example so the paragraphs 
are hidden by default but visible when they’re the target: 


p { display: none; } 
p:target { display: block; } 
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Add a simple menu: 


<menu> 
<a href="#one">Show one</a> 
<a href="#two">Show two</a> 
<a href="#three">Show three</a> 
<a href="#four">Show four</a> 
</menu> 


Initially all the tabs are hidden, so all 
you see is the menu and an empty 
space. 


Clicking the Show Two link changes 


the URL to http://host/target.html#two. 


Now #two is the target. Thanks to the 
target selector, the element with id 
value two becomes display: block 
instead of display: none. 


Clicking Show Four changes the 
target again: the element with an id 
value of four becomes visible. 
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SHOW ONE SHOW TWO SHOW THREE SHOW FOUR 


SHOW ONE SHOW TWO SHOW THREE SHOW FOUR 


IN ALMOST EVERY COMPUTATION A GREAT VARIETY 
OF ARRANGEMENTS FOR THE SUCCESSION OF THE 
PROCESSES IS POSSIBLE, AND VARIOUS 
CONSIDERAT IONS MUST INFLUENCE THE 
SELECTIONS AMONGST THEM FOR THE PURPOSES OF 
A CALCULATING ENGINE. ONE ESSENTIAL OBJECT 
IS TO CHOOSE THAT ARRANGEMENT WHICH SHALL 
TEND TO REDUCE TO A MINIMUM THE TIME 
NECESSARY FOR COMPLETING THE CALCULATION. 


SHOW ONE SHOW TWO SHOW THREE SHOW FOUR 


THE ANALYTICAL ENGINE HAS NO PRETENSIONS 
WHATEVER TO ORIGINATE ANYTHING. IT CAN DO 
WHATEVER WE KNOW HOW TO ORDER IT TO 
PERFORM. IT CAN FOLLOW ANALYSIS, BUT IT HAS NO 
POWER OF ANTICIPATING ANY ANALYTICAL 
REVELATIONS OR TRUTHS. ITS PROVINCE 15 TO 
ASSIST US IN MAKING AVAILABLE WHAT WE ARE 
ALREADY ACQUAINTED WITH. 


NOW THAT YOU'VE SEEN ALL THE NEW FEATURES, LET'S CHECK OUT WHAT 
BROWSER SUPPORT THEY HAVE. YOU MAY BE PLEASANTLY SURPRISED. ~_ 


Browser support 


Browser support for CSS3 selectors is excellent across modern brows- 


ers. The main issue in browser support is the large numbers of people 


still using obsolete versions of Internet Explorer. As you'll see, it’s easy 


to add support for these old browsers using jQuery. 
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[9] 


e Complete or nearly complete support 
Incomplete or alternative support 
Little or no support 
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ee гое 

12 14 4 6 8 |9 |10 | 11.1 | 11.5 5.1 
Adjacent sibling ° ° ° ° o ° ° ° ° ° 
General sibling ° ° ° ° ° ° ° ° ° 
First/last child ° ° ° ° ° ° ° ° ° 
nth/last child ° ° ° ° о о б б e 
Only child ° ° ° ° o e б e 
Of type ° ° ° ° о о e e e 
Attribute ° ° ° ° ° ° ° ° ° ° 
= ° ° ° ° ° ° ° ° ° ° 
A= ° ° ° ° ° ° ° ° ° ° 
*= ° ° ° ° ° ° ° ° ° ° 
$= ° ° ° ° ° ° ° ° ° ° 
~= ° ° ° ° ° ° ° ° ° ° 
Мої ° ° ° ° ° ° ° ° ° 
First letter e ° ° ° ° ° ° ° ° ° 
First line ° ° ° ° ° ° ° ° ° ° 
Dis-/enabled ° ° ° ° ° ° ° ° 
In-/valid ° ° ° ° ° ° ° ° 
Checked ° ° ° ° ° ° ° ° ° ° 
Indeterminate ° ° ° ° ° ° ° ° ° ° 
Optional/required ° ° ° ° ° ° ° ° 
Target ° ° ° ° ° ° ° ° ° 
Кеу: 
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Using jQuery to support older browsers 
The jQuery JavaScript library uses CSS selectors as a key part of its 
normal operation. In order for this to work cross-browser, the authors 
of jQuery had to implement CSS selectors in JavaScript. This is handy 
if you want to use the latest CSS features but still present more limited 
older browsers with your intended design. 


Here's a CSS selector that doesn't work ONE TWO THREE FOUR FIVE 
in IE8 and older: 12 з а 5 
1 2 3 4 5 

tbody tr:nth-child(2n«1) { 

background: #999; 1 2 i А 5 
} 1 Z 3 4 5 
| 12 3 4 5 
The screenshot shows that in ІЕ8, the 1 2 E 4 5 


odd rows don't have the gray back- 
ground that the rule specifies. 


To add IE8 support without messing up your markup, you can add 
some jQuery. Start by adding the library itself: 


«script src="jquery-1.5.2.min.js"> 
</script> 


In an IE-only code block, use the jQuery selector engine to match the 
nodes using the same selector, and add a class to them: 


<!--[if lte IE 8]> ONE TWO THREE FOUR FIVE 
«script» 1 2 3 4 5 
$ (document) . ready ( 1 2 3 а 5 
function() { ; " T m E 
$C'tbody tr:nth-child(2n+1) ') 
.addClass('odd'); 1 2 3 4 5 
} 1 2 з 4 5 
) 1 2 3 а 5 
</script> 
«style» 
tr.odd { background: #999; } 
</style> 
<! [endif]--» 
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All that’s now required is to replicate the style elements with that class. 
In most cases, you can add the selector to your original rule. But the 
nth-child syntax will cause IE8 to treat the whole rule as invalid, so the 
style rule also has to be replicated. 


USING JQUERY TO SUPPORT OLDER BROWSERS IS A HANDY WORKAROLIND IF 
THERE ARE SOME CSS3 STYLES THAT ABSOLUTELY MUST BE APPLIED. IN LATER 
CHAPTERS, YOU'LL SEE OTHER JAVASCRIPT LIBRARIES THAT CAN ENABLE CSS3 
FEATURES IN OLDER BROWSERS. THESE CAN BE MASSIVE TIME-SAVERS. BUT 

SY REMEMBER, THEY DO COME АТ A COST-—IF YOU RELY ON THEM HEAVILY, THEY CAN 
SIGNIFICANTLY INCREASE YOUR PAGE-LOADING TIMES. 


Summary 


In this chapter, you’ve learned about many new features available in 
CSS3 for selecting elements: combinators for selecting elements based 
on relationships with their parents; pseudo-classes for selecting ele- 
ments based on their relationships with their siblings; attribute selec- 
tors that reduce your dependence on class and id attributes; and 
dynamic pseudo-classes for giving immediate feedback to users on the 
state of form elements. It’s been a lot to get through, but these features 
make up the foundation on which all the rest of CSS is built. 


AFTER YOU'VE PICKED OUT ELEMENTS WITH SELECTORS, PSEUDO-CLASSES, AND 

ATTRIBUTE SELECTORS, YOU'LL WANT TO APPLY STYLES TO THEM. CSS3 OFFERS MANY 
2 NEW OPTIONS IN THAT DEPARTMENT, AND IN THE REST OF THE BOOK YOU'LL LEARN 

ABOUT THEM. WE'LL START IN THE NEXT CHAPTER WITH THE NEW OPTIONS FOR LAYOUT. 
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Layout with C5953 


This chapter covers 


• inline-block and table display values from C652 

* calc and box-sizing properties that make C522 layout more manageable 
* Media queries to give different C55 to different devices 

* New C955 layout modules: templates, grids, and regione 


Many people have complained over the years about the poor tools avail- 
able for layout in CSS. This isn’t an unwarranted criticism, because CSS1 
had almost no layout tools. No one anticipated that people would start to 
do graphic design with web pages until it happened. Several options were 
added in CSS2, most of which didn’t see broad browser support until the 
release of IE8 in 2009. Given that it’s taken so long for CSS2 layout to be 
supported, support for CSS3 layout modules got off to a slow start; but 
recently there’s been a lot of activity. This chapter covers both the old fea- 
tures of CSS2 that haven’t seen much use and the new features in CSS3 
that browsers are just starting to support. 
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An HTMLS contribution to tables for layout 


The W3C HTML working group has acknowledged the incredible persistence of 
the layout table and, thanks to HTML5 and ARIA, has recommended a method 
for indicating that a particular table is semantically meaningless (that it's just for 
layout): 


«table role="presentation"> 
This doesn't mean you should ignore all the best practice advice and convert 
your CSS layouts to tables, but it does mean you can easily make old pages more 


accessible without a major rewrite. See www.w3.org/html/wg/tracker/issues/ 
130 for further details. 


Underused C992 layout features 


CSS2 had several new features for layout — inline-block and table, 
table-row, and table-cell values for the display property —but they've 
seen little use in real websites because of the lack of support for them in 
the most popular browser of all time (in terms of market share), IE6. In 
this section, we'll review these underused features of CSS2. 


Placing elemente on a line with inline-block 
inline-block is a compromise between <block> elements and <inline> 
elements. A <block> element can have a defined width, height, padding, 
and margin and causes a break in the text. An <inline> element sits on 
the line of text but can’t have a width, height, padding, or margin. An 
inline-block element combines features of both—it sits on the line of 
text, but it can be given a specific width, height, padding, and margin. 


This simple markup will be used to dem- — «header 


onstrate layout with inline block. If you «h1»Heading«/h1» 


А </header> 
check the code download for this chapter, / : 
: i «section» 
you'll find an example layout done with <p>I never am...</p> 
floats, a method familiar to anyone </section> 
whos done any CSS layouts in the last <aside>Side bar</aside> 


ten years. Achieving a similar layout ла А 


with inline-block requires that you set 
the widths of the «section» and «aside 
elements appropriately: 
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header, section, aside, footer { == ses шешшш шш ! 
. ' L| 
margin: 276; ! HEADING ' 
. LI I 
padding: 2%; PEA DEEP OCURRE E 
outline: 4px dashed black; К а ы ‘im o : 
i : INEVER AM REALLY SATISFIED THAT a zc me = 
vertical-align: top; ! T UNDERSTAND ANYTHING: Because, | 
UNDERSTAND ІТ WELL AS IMAY MY =! 
} 1 COMPREHENSION CAN ONLY BE AN — ! 
; : ! INFINITESIMAL FRACTIONOFALI I 
section, aside { ! WANT TO UNDERSTAND ABOUT THE 1 
1 MANY CONNECTIONS AND RELATIONS 1 
1 * 1 1 Es . 1 WHICH OCCUR TO ME. HOW THE 
display: inline-block; Немогу AMEN 2 
1 E . THOUGHT OF OR ARRIVED AT. ETC. 
width: 54.5%; ! ere | 
} ҮТТЕ 4 
aside { ! FOOTER ! 
margin-right: 0; 
width: 28.5%; 
} 
x Full Partial 
2 
m 
ЦЕ 
£ 
£ 
x 
3 е 3.0 2.0 
С 
о 
$ 
5 ae 8.0 6.0 
с 
= 
о 
2 
О = 
o 
L-] 
Ф 
z 
Ө = 
5 
oO 
inline-block solves several issues г р ра 4 
that afflict floats. The first benefit of ! HEADING : 
à A D | Ferrera em 4 
inline-block over floats is that the — е 1--2--2---- i 
1 LI 
elements aren't removed from the p Тык MALE TESTI | 1 MANOST OMY | 
. UNDERSTAND IT WELL AS д 1 a GREAT VARIETY oF ! 
normal document flow. This means 1 COMPREHENSION CAN ONLY BE AM. ! ! ARRANGEMENTS FOR ' 
і Й з | INFINITESIMAL FRACTION OF ALL I 1 | THE SUCCESSION 1 
WANT TO UNDERSTAND ABOUT THE | , OF THE PROCESSES 1 
that in a basic two-column layout, it ERAI CONEZTRUS нола а U эрма RD 1 
Й . 1 WHICH OCCUR TO МЕ. HOW THE 1 | VARIOUS П 
doesn t matter which of the columns 1 MATTER INQUESTIONWASFIRST р ! CONSIDERATIONS | 
: > 1 THOUGHT OF OR ARRIVED AT. ETC. П 1 MUST INFLUENCE 1 
ЕТС | THE SELECTIONS 
is the longest. Any full-width ele- | i power Tinton | 
. козу He op o | c o 1 THE PURPOSES OF A 
ment will automatically be pushed (лыт | 
. . ' 
below both columns — по clearing is ПОНЕС А 
: eios, tn (eo а ашай шшш od iu йш шша su un І 
required. > FOOTER i 
ы - ==... == ====®======== E 
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inline-block also makes the behavior 
of grids of items more consistent 
when there are elements of different 
sizes. Elements that are inline-block 
are aligned with the normal 
character grid, just like lines of 

text on a page. In this screenshot, 
you can see that the oversize 
element forces the entire next 

line down. 


Being aligned with the normal char- 
acter grid does present other issues. 
Spacing is no longer entirely con- 
trolled by margins. This code is from 
ch08/layout-inline-4.html: 
div { 
margin: 0; 
border: 4px dashed black; 
display: inline-block; 
} 
You can see that despite the margin 
being set to 0, there’s still a gap 
between the elements on each row. 


This gap is due to letter and word 
spacing. Elements that are 
inline-block behave as if they're 
letters or words. Setting negative 
spacing removes the gap, as in 
ch08/layout-inline-4a.html: 
body { 
letter-spacing: -0.4em; 
word-spacing: -0.4em; 
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Other text properties also affect inline-block elements — baseline align- 
ment sometimes causes unexpected spaces to appear between rows of 


elements. 
Inline-block good Inline-block bad 

MANY OF THE SAME ISSUES WITH 
BENEFITS AS floats. LETTER SPACING. 
BLIT WITHOUT THE BASELINE 
CLEARING ISSUES. ALIGNMENT CAN 
MORE CONTROL OVER TRICK YOU. 
HOW THE LAYOUT BREAKS. 


Grouping element dimensions with display: table 
One question you might well ask yourself: if browsers use CSS for their 
layout, what CSS do they use to lay out tables? The simple answer is 
that there's a special CSS display mode for tabie, as well as display 
modes for table-row and table-celi. All of these display modes can be 
applied to nontabular elements. 


Неге а simple layout created with display: table. The following markup 
is taken from ch08/layout-table- 1 .html. It's based on the listing in ch08/ 
layout-table-1-actualtable.html, which implements the same layout 
using an HTML table. If you've never done a layout with a table before, 
please check out that listing because there's no room to show it here: 


«header» 


è L| 
<h1>Heading</h1> i 
<figure> | 
а " " I 
<img src="dust-puppy .svg"> i 
</figure> ! HEADING 
L| 
</header> i 
<div> PENERE [=== omm 
«section» ! INEVER AM REALLY SATISFIED THAT I 
<p>I never am ...</p> : UNDERSTAND ANYTHING: BECAUSE. 
К UNDERST AND IT WELL AS I MAY, MY 
</section> 1 COMPREHENSION CAN ONLY BE AN 
2 2 B 1 INFINITESIMAL FRACTION OF ALL IWANT 
<aside>Side bar</aside> 1 TO UNDERSTAND ABOUT THE MANY 
</div> 1 CONNECTIONS AND RELATIONS WHICH 
1 OCCUR TO ME, HOW THE MATTER IN 
<footer> | QUESTION WAS FIRST THOUGHT OF OR 
<nav> | ARRIVED AT. ETC. ETC. 
š i 
«a href="/11">Link 1</a> E aS = аш, m SS = cinco шге "1 L---- 
«a href="/12">Link 2</a> | тк 2 
</пау> үл ы ы е ES J 
<small>Footer credits</small> 
</footer> 
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This listing was created by 
replacing each t Et, and table 
element in the original table lay- 
out with more semantic con- 
tainer elements. The direct 
replacement means you have 
suitable elements to attach the 
table-row and table-cell styles to 
and, because this is a simple doc- 
ument, you can set body to be 
display: table rather than add an 
explicit wrapper in place of the 
table element. 


body 1 
display: table; 
border-collapse: separate; 
border-spacing: 1em; 

} 

header, div, footer { 
display: table-row; 

} 

section, aside, figure, hl, nav, 
small { 
display: table-cell; 

} 

img { max-width: 100px; } 


Full 

; 06" 
o 
Ф 
= 
o 
260 
or 
5 

ae ae 8.0 
ЕЕ 
Ф 
o 

ГО = 
9 
a 

Ө + 


Partial 


USER FRIENDLY by J.D. “Iliad” Frazer 


SO WHAT BENEFITS DO WE 
GAIN WITH THIS DISPLAY: 
TABLE OVER JUST USING A 
LAYOUT TABLE? 


COPYRIGHT © 2007 3.0. “Miad” Frazer NTTP://WWW.USERIRICNOLY_ORG/ 


NOW THE MARKUP MORE | SO. JUST A WARM, SATISFIED 
CORRECTLY DESCRIBES OUR | FEELING INSIDE? 
CONTENT AND OUR LAYOUT 
15 WHERE IT BELONGS, IN 
THE STYLESHEET. 


mi 
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The naive approach to using dis- 
play: table might look something 
like this. You have classes for 
every element of the table hierar- 
chy. The following images show 
this applied to two different 
markup fragments. (See the full 
listing in ch08/layout-table- 
Á.html.) 


ppp 
i са it ска LI 


ı 1 112 11 3 1 4 


П т it 11 [ 
———n boen 


<div class="grid"> 
«div class="row"> 
<div class="celL">1</div> 
<div class="celL">2</div> 
«div class="cel1L">3</div> 
<div class="celL">4</div> 
</div> 
</div> 
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.grid 1 
display: table; 
border-collapse: separate; 
border-spacing: 1em; 
} 
.row { 
display: table-row; 
} 
.cell { 
display: table-cell; 
width: 2526; 
} 


„шей (eel поа И рне | ыйыы 
tt it 11 1 


i 5 11 6 it 7 11 8 П 
П i 11 П. П 
— baod hawd khasa 


<div class="grid"> 
<div class="cell">5</div> 
<div class="cell">6</div> 
<div class="cell">7</div> 
<div class="cell">8</div> 
</div> 


There’s no difference in rendering between the two versions of the 
code. This is because the browser inserts an anonymous table object in 
place of the missing table row. You can see more clearly how it works if 
you look at an example that doesn’t work in your favor. The next list- 
ing is from ch08/layout-table-2.html; markup is on the left and CSS is 
on the right: 


<body> body { 
<header> display: table; 
<h1>Heading</h1> } 
</header> header, footer, div { 
<div> display: table-row; 
«article»...«/article» H 
<aside>...</aside> article, aside { 
</div> display: table-cell; 
<footer>Footer</footer> } 
</body> 
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For this code, you might expect the 
header to extend across the entire 
width of the page because it’s set to be 
display: table-row. But what actually 
happens is shown at right. Because 
there are no elements in the row with 
display: table-cell, header is promoted 
to that role, and an anonymous table 
object assumes the role of the table row. 
The result is that the header and footer 
both have the same width as the first 
table-cell element in the middle row. 


1 [] 
1 INEVER AM REALLY SATISFIED THAT I : 
1 UNDERSTAND ANYTHING: BECAUSE, UNDERSTAND IT | 
1 WELL AS I MAY. MY COMPREHENSION CAN ONLY BE. 
1 ANINFINITESIMAL FRACTIONOFALIWATTO ! 
q UNDERSTAND ABOUT THE MANY CONNECTIONS AND! 
1 RELATIONS WHICH OCCUR TO ME. HOW THE MATTER ! 
1 IN QUESTION WAS FIRST THOUGHT OF OR ' 
1 ARRIVED AT. ETC. ETC. 1 
' 


display: table good 


display: table bad 


LIKE TABLES, ELEMENTS’ 


VISUAL PROPERTIES ARE НЕРВИҢ. ШУ 

— RELATED SO А SET OF FOR LAYOUT. 
ELEMENTS IN A ROW ALL SOME OF THE SAME. NN 

SHARE THE SAME. HEIGHT. PERFORMANCE. 

ISSUES AS TABLES. 


USER FRIENDLY by J.D. "Шад" Frazer 


WHY DO YOU CARE SO MUCH 
ABOUT THE SEPARATION OF 
PRESENTATION AND CONTENT? 


THE CONTENT IS WHAT 


=~ 


COPYRIGHT (2009 J.D. "ИНЬ" Frazer NTTP:/ /WWW.USERFRIENDLY.ORG/ 


YOU HAVE NO WAY TO CONTROL 
HOW USERS WILL BE ACCESSING 
YOUR CONTENT, SO IT'S UP TO 
THE WEB DEVELOPER TO MAKE IT 
AS EASY AS POSSIBLE FOR THEM 
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DOESN'T THAT MAKE YOUR 
JOB MORE DIFFICULT? 


NO ONE PROMISED WEB 
DEVELOPMENT WOULD BE EASY. 


NYET/WEBIS @@ 
NOT BEINK REAL ( Ё 


DEVELOPMENT / 


YOLI NOW HAVE. A GRASP OF WHAT C952 HAS TO OFFER IN TERMS OF LAYOLIT. THE GOOD 
NEWS IS, SINCE THE LAUNCH OF IE8 IN MARCH 2009, EVERY MAJOR BROWSER SUPPORTS 
ALL THESE APPROACHES. IN THE NEXT SECTION, YOU'LL LEARN ABOUT TWO SMALL BUT 
USEFUL IMPROVEMENTS THAT CSS3 OFFERS FOR CSSZ-COMPATIBLE LAYOUTS. 
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C995 improvements to C992 approaches 


One of the major pain points that arise with the CSS layout approaches 
mentioned in the previous sections is the control of combined width, 
particularly when mixing percentage and pixel units as you saw with 
inline-block. CSS3 offers two new features that alleviate this pain: 


^ A calcO function 
© The box-sizing property 


The calc function allows the construction of widths from multiple 
units: for example, 25% — 4px. This is useful if several elements need to 
fit exactly in a percentage width, but each needs to have a border or 
margin of a certain number of pixels. box-sizing gives the web author 
control over the problematic CSS box model. Both are covered in more 
detail in this section. 


Mixing different length unite with calc 


Many of the issues with using floats or inline-block for layout are due 
to the basic incompatibility of different length measurements —how 
many pixels to a percentage point, or how an em varies due to factors 
beyond your control such as window size and font rendering. Following 
is the example layout from the previous discussion of inline-block. 
Earlier, all the widths were specified in percentage values, but now 
there's a mixture of percentages, pixels, and ems: 


body { pce ones еы шшш и шш І 
. LI ' 
width: 90%; ! HEADING 1 
` П ' 
margin: 0 5%; Ее E 
font-family: pO RI EE laum ! 
а а ! X NEVER AM REALLY SATISFIED THAT 3 icon ! 
"Komika Hand", sans-serif; ! SuMDERSTAD aTe ecus 1 5 77777 = 
UNDERSTAND IT WELL AS І MAY.MY |! 
} " COMPREHENSION CAN ONLY BE AN ' 
. . ! INFINITESIMAL FRACTIONOFALLI 1 
header, section, aside, footer { | WANT TO UNDERSTAND ABOUT THE 1 
. 1 MANY CONNECTIONS AND RELATIONS 1 
margin: Lem; 1 WHICH OCCUR TO МЕ. HOW THE 1 
. 1 MATTER IN QUESTION WAS FIRST П 
padding: 1em; 1 THOUGHT OF OR ARRIVED AT.ETC. | 
LI 


1 ETC. 


outline: 4px dashed black; 
vertical-align: top; Гоген mimm mmm pnm E ae i 


section, aside { 
display: inline-block; 
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width: 54%; 


} 

aside { 
margin-right: 0; 
width: 2526; 

} 


You can see that the sidebar is poking out to the right of the header and 
the footer. The problem is worse than it appears because how much the 
sidebar pokes out depends on many factors. The following screenshots 
show the alignment of the sidebar with the footer at various browser 
window sizes (the gray bar has been added so you can more easily see 
the variation, and the sidebar and footer are shown next to each other 
for convenience). 


640px width 800px width 1024px width 1280px width 


These issues are bound to occur when combining CSS lengths of differ- 
ent types. The number of pixels taken up by an em or a percentage will 
vary depending on font size and window size. On the other hand, it’s 
rare that you'll want something like a border to be a different width 
depending on the width of the browser window. CSS3 provides the calc 
function to allow you to combine different units in a predictable way. 


Take the earlier example CSS and, 
assuming everything else remains 

the same, you can change the ---------------------- - 
widths to the following: 


І NEVER AM REALLY SATISFIED THAT І 
UNDERSTAND ANYTHING: BECAUSE, 
UNDERSTAND IT WELL AS I MAY, MY 


П 
1 I 
1 ' 
> š ' ! 
section, aside { 1 COMPREHENSION CAN ONLY BE AN ! 
. 1 INFINITESIMAL FRACTION OF ALL I ! 
width: calc(70% – 4.665em); 1 WANT TO UNDERSTAND ABOUT THE MANY 1 
1 CONNECTIONS AND RELATIONS WHICH 1 

1 
i 1 
' 


} OCCUR TO ME. HOW THE MATTER IN 
v QUESTION WAS FIRST THOUGHT OF OR 
aside 1 ARRIVED AT. ETC. ETC. 
width: calc(30% – 3.665em); 1-------------- - 
Sees Ses 6 eS See SS Se See шош П 
} ! FOOTER r 
I 
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This produces a more reliable lay- 
out. And, as the following screen- 
shots show, everything stays the 
same width at different screen 


widths. 


640px width 800px width 1024px width 1280px width 


As always with inline-block, there’s the issue of letter spacing. A cer- 


281 


tain amount of trial and error was involved in arriving at those 4.665em 


and 3.665em lengths. A more straightforward approach is to remove 


the letter spacing as a factor by setting it to a negative value. 


body { 
letter-spacing: -0.5em; 
} 
header, section, article, aside, 
footer { 
letter-spacing: normal; 
} 


section, aside { 
width: calc(70% – 4em); 


} 
aside { 

width: calc(30% - 4em); 
} 


The negative letter spacing on the 
body allows saner width calculations, 
but then the letter spacing needs to be 
explicitly set on the child elements. 
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1 I NEVER AM REALLY SATISFIED THAT I : 
V UNDERSTAND ANY THING: BECAUSE. 1 
1 UNDERSTAND IT WELL AS І MAY, МҮ 
1 COMPREHENSION CAN ONLY BE AN l 
1 INFINITESIMAL FRACTION OF ALL I ! 
1 WANT TO UNDERSTAND ABOUT THE MANY ' 
q CONNECTIONS AND RELATIONS WHICH ' 
П OCCUR ТО МЕ, HOW THE MATTER IN ' 
1 QUESTION WAS FIRST THOUGHT OF OR 1 
1 ARRIVED AT, ETC, ETC, 1 
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Full Partial 
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e EVEN WITH calc, IT'S DIFFICULT TO GET 

5 THINGS PERFECT FOR EVERY WIDTH WHEN 

d а Я USING PERCENTAGES BECAUSE OF 

e ROUNDING ERRORS—ON A WINDOW 640 NS 

= PIXELS WIDE, A BOX OF 30% WIDTH IN THIS x A 

9 LAYOUT WORKS OUT AS 1728 PIXELS WIDE. 

m = 5.2 THE BROWSER HAS TO CHOOSE WHETHER TO I 
RENDER THAT AS 172 OR 173 ACTUAL PIXELS, | 
AND YOU HAVE TO HOPE IT ALL WORKS OUT. 


There’s more to calc than simple oa. es Жини аы F^ 
"b ў 1 F 2 t з | 4 # 5 dg 
addition and subtraction. calc aw a ae arr ae ar ager ate are arte ager oe fe ml 
les Жыга Дод. ' a # B P с P» 0 P» к P» F | 
ma es it strag orwar o do fa oe a ae a a aa 
things that are hard with any 195. 1. 0 б ою єє ДИО. 


other approach. Imagine that 
you have a set of elements of dif- 
ferent widths that you want to 
display on multiple rows, but 
each row should be an identical 


width. 


Here's the CSS to generate this screenshot: 


div { 
float: left; 
margin: 0; 


padding: lem 0; 

border: 4px dashed black; 
} 
.half third { 

width: calc(50%/3 - 8px); 
} 
.half half { 

width: calc(50%/2 - 8px); 
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.sixth { 
width: calc(100%/6 - 8px); 


} 


.quarters { 
width: calc(100%/4 - 8px); 


} 


And here's the HTML —assume it fits in a standard HTML5 document; 
see ch08/calc-3.html for the full listing: 


<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 


class="half_third">1</div> 
class="half_half">2</div> 
class="half_third">3</div> 
class="half_half">4</div> 
class="half_third">5</div> 
class="sixth">A</div> 
class="sixth">B</div> 
class="sixth">C</div> 
class="sixth">D</div> 
class="sixth">E</div> 
class="sixth">F</div> 
class="quarters">00</div> 
class-"quarters"»01«/div» 
class="quarters">10</div> 
class="quarters">11</div> 


Because table cells in a column share a width, this is extremely difficult 


to do with a single table. And because of rounding errors, it can be dif- 


ficult with any other approach unless you choose carefully for the over- 


all width. 
calc good calc bad 
ALLOWS PRECISE. CONTROL 
OF LENGTHS SPECIFIED IN REQUIRES AN 
ANY COMBINATION UNDERSTANDING OF 
HOW PADDING, MARGIN, ^. 
AND BORDER COMBINE 
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USER FRIENDLY by J.D. "illiad" Frazer 


HOW CAN YOU SAY I DONT WE CAN BUILD ENTIRE 
DO REAL DEVELOPMENT? APPLICATIONS IN THE BROWSER 
WHY SHOULDN'T THEY BE BUILT 
WITH AS MUCH ENGINEERING 
È| QUALITY AS ANY OTHER 


I AM APOLOGISINK. AM HAVINK 
NO IDEA LOLCATS PICTURES IS 
NEEDINK SUCH ENGINEERINK 


Controlling the box model 


One of the more difficult aspects of layout in the late 1990s was the 
incompatible implementation of the CSS box model. Some browsers 
behaved as if the width and the height included the border, whereas the 
specification excluded the border and padding from width and height 


calculations. 


Browser support quick check: box-sizing 


WIDTH 
box-sizing: content-box; box-sizing: border-box; 
Full Partial 


IN SPITE OF IT BEING NONSTANDARD, MANY 
10.0 1.0 PEOPLE FELT THAT THE METHOD OF 
CALCULATING WIDTH THAT INCLUDED THE 

BORDER WAS MORE INTUITIVE. SO INCSS3 NN 

20 YOU CAN SPECIFY THE SIZING CALCULATION 
YOU WANT WITH THE box-sizing PROPERTY. 
THE TWO ALTERNATIVES ARE SHOWN NEXT. 


8.0 - 


9.5 - 


5.1 3.1 


ecce 
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This CSS creates two boxes that are exactly the 
same size visually, despite differing in width and 
height by 50 pixels: 


Zone { 
box-sizing: content-box; 
width: 150px; 
height: 150px; 
border: 25px solid black; 


} 
#two { 
box-sizing: border-box; 
width: 200px; 
height: 200px; 
border: 25px solid black; 
} 


The markup required is 


«div id="one"></div> 

<div id="two"></div> 

This feature isn’t as obviously useful now that 
you have calc, but it might save you some effort 
if you want a set of elements to have the same 
size but different-width borders. 


YOU'VE NOW LEARNED ABOUT ALL THE CURRENTLY VIABLE TECHNIQUES FOR LAYOUT 
WITH CSS. BUT EVEN WITH ALL THESE TOOLS, IT'S A CHALLENGE TO DESIGN A SINGLE 
LAYOUT THAT WORKS WELL ON POWERFUL DESKTOP PCS, PORTABLE TABLETS, AND 
MOBILE PHONES. MEDIA QUERIES ALLOW YOU TO TAILOR YOUR LAYOUTS TO THE 
CAPABILITIES OF THE DEVICE, AS YOU'LL LEARN IN THE NEXT SECTION. 


Using media queries for flexible layout 
CSS has long had the ability to apply different styles based on the out- 


put device, whether it’s a PC screen, a handheld device, or a printer. 
For instance, a print stylesheet can be applied to an HTML document 
in several ways. 


Linking from HTML <link rel="stylesheet" media="print" href="print.css"> 


Embedding in HTML «style media-"print"»«/style» 


Inline in CSS (media print { } 
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These are known as media queries. All three of 


Full Partial f pb: 
the previous examples are constraining the 
E е 2.0 : styles they reference or include to only apply 
o . . . 
&g И to print media. In CSS2 you could also restrict 
о . 
x 2 & 35 - to screen, aural, braille, handheld, or speech, 
55 among others. The default, if you don't spec- 
es i . . 7 
ES г 90 А ify anything, is all—the styles will apply no 
Q . . 
22 matter what the output device is. 
go О 9.5 - 
2 
m 
Ө 4.0 3.1 


USER FRIENDLY by J.D. "Шаа" Frazer 

HOW HARD CAN THAT BE? SURELY 
{ THERE'S AN ONLINE SERVICE FOR 
ŽIT. 


WHAT DOES IT MEAN. UPGRADE? ТМ 
ON CHROME ВЕТА! 


BROWSER DETECTION IS 
BAD? WHY? 
IT RELIES ON KEEPING A 
DATABASE OF BROWSER 
CAPABILITIES UP TO DATE. 


HAVE YOU APPLIED FOR THAT'S WHY BROWSER 
VACATION ON THE DETECTION IS A BAD 
INTRANET RECENTLY? 


“9 
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Mobile browser support 


CSS3 media queries are especially important for mobile browsers. All the current 
major smartphone browsers have support: the iOS and Android standard brows- 
ers; mobile Opera and Firefox; and IE in Windows Mobile 7.5. 


Media queries avoid browser detection by letting the browser itself 
determine what support it has. If a new browser or device comes along 
that you hadn't anticipated, as long as you've used media queries, it 
should still select the most appropriate set of CSS rules. CSS3 dramati- 
cally extends the number of properties that can be used in media que- 
ries. In the following sections, you'll see some practical examples of 


media queries in use. 


www.it-ebooks.info 


Using media queries for flexible layout 287 


Resolution detection 


The most common distinguishing features of different devices are 
screen resolution and window size. Most desktop users have a browser 
window at least 800 pixels wide, whereas most mobile browsers are 
less than 800 pixels wide. Media queries let you choose between the 
two situations. The basic syntax for creating a set of rules for a window 


800 pixels wide is this: 


@media screen and (max-width: 800px) { } 
@media screen and (max-device-width: 800px) { } 


Any CSS rules placed inside the squiggly brackets will only be applied 
if the conditions are met. The first rule selects based on the browser 
window size, and the second one selects based on display size — the 
browser window doesn't have to fill the entire width of the display for 
this rule to match. In this section, you'll create a layout that adapts to 
the size of the browser window. Here's what the layout looks like in a 
window 1024 pixels wide. 


THIS PAGE IS А DEMO 


I NEVER AM REALLY SATISFIED THAT I FOR MEDIA QUERIES, 


1 
r f 
1 1 Hone 1 UNDERSTAND ANYTHING: BECAUSE. UNDERSTAND IT Ё 
| d.----- = E WELL ASI МАУ, MY COMPREHENSION CAN ONLY BE Й 
pomme 1 Й AN INFINITESIMAL FRACTION ОҒ ALLIWANT TO P 
1 ! pour 1 Ё UNDERSTAND ABOUT THE MANY CONNECTIONS AND Й 
t атњәа = # RELATIONS WHICH OCCUR TO ME. HOW THE , 
pmo | Й MATTER IN QUESTION WAS FIRST THOUGHT OF Й 
|! CONTACT 1 # OR ARRIVED AT. ETC, ETC. й 
' й 


' 
1 
' 
' 
i 
1 
' 
' 
- 
' 
' 
' 
1 
LI 
1 
LI 
' 
LI 
i 
LI 
' 
' 
LH 
i 
' 
' 
h 
1 
' 
' 
LI 
' 
LI 
' 
LI 
І 


Here’s the key markup (see the full listing in ch08/media-queries- 
adaptive.html): 


<header> 
«hi»Adaptive Layout with Media Queries</h1> 
</header> 
<div> 
<nav> 
<ul> 
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<li><a href="#">Home</a></1i> 
<li><a href="#">About</a></1Li> 
<li><a href="#">contact</a></1Li> 
</ul> 
</nav> 
<article> 
<p>I never am really satisfied...</p> 
</article> 
<aside> 
This page is a demo for media queries. 
<img src="dust—puppy.svg"> 
</aside> 
</div> 
<footer> 
<span id="msg480">Viewing 480px or Less mode</span> 
<span id="msg800">Viewing 800px or less mode</span> 
<span id="msg801">Viewing 800px or more mode</span> 
</footer> 


The default three-column layout is for windows greater than 800 pixels 


wide: 
body { width: 90%; margin: 0 5%; 

font-family: "Komika Hand", sans-serif; } 
header, 


footer { display: block; width: auto; } 
nav ul { list-style: none; margin: 0; padding: 0; } 


nav a i display: block; margin: lem; 
padding: 1em; outline: 4px dashed black; j 
img { max-width: 100px; display: block; 
margin: 0.5em auto; } 
div { display: table; outline: none; padding: 0; } 
nav, 
article, 
aside { display: table-cell; } 
nav, 


aside { width: 25%; } 
article { width: 50%; } 
#msg480, 

#msg800 { display: none; } 


If viewed in a window 800 pixels wide or narrower, the page switches 
to a two-column layout. 
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es ыт жк Ик ee es Pe ee ee LE [| 
[| 
ı ADAPTIVE LAYOUT WITH MEDIA QUERIES 
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1 COMPREHENSION CAN ONLY ВЕ AN INFINITESIMAL І , 
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І 
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а= ка не: пша шй ма. ————————— шш жа шй. eee a ша эш эш I 
1 VIEWING 80OPX OR LESS MODE 1 
la жаз. rper A 


This layout is implemented with two sets of rules within media queries. 
The first provides a set of rules to be applied for any width less than 
800 pixels, and the second is a set of rules that's applied only when the 
window is between 481 and 800 pixels wide. This approach saves 
repeating rules: 


@media screen and (max-width: 800px) { 
div { display: block; overflow: hidden; margin: 0; } 
nav { display: block; width: auto; } 
nav ul { display: table; border-collapse: collapse; 
margin: 0 auto; } 
nav li { display: table-cell; } 


} 

@media screen and (max-width: 800px) and (min-width: 481px) { 
hi { font-size: 110%; } 
article, 


aside { display: block; } 

article { width: 60%; float: left; margin-right: 0; } 

aside { width: 20%; font-size: 80%; float: right; 
margin: 1.2em; margin-left: 0; } 

img { max-width: 60px; } 
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#msg480, ее S62 D E Ss = <= == І 
#msg801 { display: попе; } | ADAPTIVE LAYOUT WITH MEDIA QUERIES i 
#msg800 { display: inherit; } ÉL ы жала EE 2 
} а ie а ана == =| 


ABOUT | CONTACT 


a ge ee 


Finally, at a width of 480 pixels orless, — ' 

I NEVER AM REALLY SATISFIED THAT І 
UNDERST AND ANYTHING: BECALISE. UNDERSTAND 
IT WELL AS I MAY. MY COMPREHENSION CAN 
ONLY BE AN INFINITESIMAL FRACTION OF ALL 


the layout becomes single column. 


CONNECTIONS AND RELATIONS WHICH OCCUR 
TO ME, HOW THE MATTER IN QUESTION WAS 
FIRST THOUGHT OF OR ARRIVED AT, ETC. ETC. 


this layout were specified in the less- 


' 
i І 

i ' 

! 

The majority of the required rules for ; I WANT TO UNDERSTAND ABOUT THE MANY І 
' ' 

i ' 

' 


than-800 pixels example. These rules 
mostly adjust the size of elements to 
allow more content to appear on a 
mobile screen: 


@media screen and (max-width: 480px) { 


һ1 { font-size: 105%; } 
nav { padding: 0; } 
nav a { margin: 0; padding: 
0.25em 0.5em; } 
article, 
aside { display: block; width: auto; } 
#msg800, 


#msg801 { display: none; } 
#msg480 { display: inherit; } 
} 


Following are screenshots of the same page оп an Android phone іп 


portrait mode (left) and landscape mode (right). 


m-----------I ptt ttt sees eee ee ee ee ee 


I 
i ADAPTIVE LAYOUT WITH : 1 ADAPTIVE LAYOUT WITH MEDIA QUERIES 
I MEDIA QUERIES А L 


L = = eee ee ee = el г-------------------- 
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HOME АВОШТ & CONTACT ааг 


І 
L ZZRIL I 1 HOME 1 ! ABOUT ! ! CONTACT I 
eee E EE ТЫ ' bad ice, а асаа аи 
І i 
1 2 NEVER AM REALLY I =================== = = 
| SATISFIED THAT I 1 m--------------Lp----4 
I UNDERSTAND ANYTHING; А 1 | 1 THIS PAGE IS A 
, BECAUSE. UNDERSTAND IT Б - Т МЕЛЕР AM REALI Y GATTGETED THAT =. „ РЕМО РОК 
Portrait (480px width) Landscape (800px width) 
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IN THIS EXAMPLE, THE DEFAULT LAYOUT IS A FULL-SIZED SCREEN DESKTOP 
EXPERIENCE. MEDIA QUERIES WERE USED TO ADAPT TO LOWER RESOLUTIONS. FOR 
PRACTICAL USES, IT'S OFTEN BETTER TO DO THINGS THE OTHER WAY AROUND- N 
WHEN ТЕЧ IS RELEASED ALL THE MAJOR DESKTOP BROWSERS WILL SUPPORT MEDIA 
QUERIES. BUT IE ON WINDOWS MOBILE 7 WON'T, AND NEITHER WILL BROWSERS ON AA 
OLDER FEATURE PHONES. IF YOU EXPECT LOTS OF THESE VISITORS, DESIGN FOR 
THE SMALL SCREEN AND USE MEDIA QUERIES TO ADAPT FOR LARGER DEVICES. I | 


Changing layout based on orientation and aspect ratio 
Maybe you want to do different things on a display that’s 640 pixels 
wide and 480 pixels tall compared to one that is 640 pixels wide but 
800 pixels tall—you want to know whether the aspect ratio is land- 
scape or portrait for a given width. You can specify rules like this: 


@media screen and (min-width: 640px and max-height: 480px) { } 
@media screen and (min-width: 640px and min-height: 800px) { } 


But this is a very fragile solution. For a start, you're missing windows 
that are 640 pixels wide but, perhaps thanks to a permanent toolbar, 
only 780 pixels tall. You could adjust to that particular case, but what if 
some innovative manufacturer came up with a 700 x 500 pixel device? 
In general, the idea behind media queries is for you to end up doing 
less work —not rewriting chunks of your stylesheet for every possible 
combination of width and height. 


Fortunately, CSS3 provides an orientation media query for just this 


situation: 


@media screen and (min-width: 640px and orientation: portrait) { } 
@media screen and (min-width: 640px and orientation: landscape) { } 


Orientation is a special case of aspect-ratio. The previous two rules are 
equivalent to these: 


@media screen and (min-width: 640px and max-aspect-ratio: 1/1) { } 
@media screen and (min-width: 640px and min-aspect-ratio: 1/1) { } 


Using aspect-ratio, it's possible to distinguish between widescreen dis- 
plays and traditional monitor sizes: 


@media screen and (min-width: 640px and aspect-ratio: 16/9 ) { } 
QGmedia screen and (min-width: 640px and aspect-ratio: 4/3 ) { } 
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In this case you may want to select based on the monitor size rather 
than the window size: 


G@media screen and (min-width: 640px and device-aspect-ratio: 16/9 
Qmedia screen and (min-width: 640px and device-aspect-ratio: 4/3 


217 
) {+} 
device-aspect-ratio: always matches the monitor, regardless of the 


window size. 


Additional device-detection features 


Media queries can be used for more than just screen sizes. There are 
several other features for detection in the spec, and various browser 
vendors are introducing more as they add functionality to their brows- 
ers. Here are some of the more interesting ones: 


^ color— Select rules based on the number of bits available per color 
channel, where 8 bits is 255 levels per color. If you can remember the 
days of web-safe colors, this feature lets you work around the pixela- 
tion issues that web-safe colors avoided. Devices that have limited 
color support can be given a more constrained set of background 
colors. 


resolution— Select rules based on the dots per inch (dpi) of the dis- 
play. A display with high dpi renders fonts more readably, so you 


can use a smaller font size. 


^ touch-enabled— This is currently a Mobile Firefox-only feature. 
Select rules based on whether the display is a touch input device, 
perhaps to give buttons and links more finger space. 


^ device-pixel-ratio — Currently a Mobile Safari-only feature. Select 
rules based on the zoom level, perhaps to provide a higher-resolution 
background image as the user zooms in so the image remains crisp 
and sharp. 


Can you really make a mobile website with just CSS? 


Is it possible to make your website deal with a full range of mobile devices and 
desktop PCs just by fiddling with CSS? As with most things, the answer is, "it 
depends." 
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(continued) 


A brochureware website that is mostly static pages and doesn't expect much in- 
teraction from the user is almost certainly a good candidate for adaptation with 
media queries. Similarly, blogs or other text-heavy websites ought to be straight- 
forward enough to make work on a wide range of devices. Mobile users, who are 
often paying for their connectivity by the megabyte, might appreciate not being 
forced to download huge video files, large graphics, and lots of ads; but if the 
site in question is relatively lightweight in this department it shouldn't be a prob- 
lem. Also remember from chapter 4 that if you're using HTML5 to serve your vid- 
eo files, you have built-in functionality to serve lower-resolution and lower- 
quality files to mobile devices. 


The more application-like a website is, the more likely it is that you won't be able 
to deliver the same content to all devices and end up with a usable experience 
for all users. In this situation, you should consider dynamically loading portions 
of your app with JavaScript after you've determined the capabilities of the device. 


One last thing to bear in mind: studies have shown that many desktop users pre- 
fer to use the mobile versions of certain popular websites. The mobile versions 
are frequently simpler and more task focused—or, looked at another way, the 
desktop websites are too complex and confusing. Media queries and mobile web- 
sites don't absolve web authors from thinking about the needs of their users. 


CSS3 PROMISES TO FINALLY EQUIP WEB AUTHORS WITH LAYOUT TOOLS WITH 
POWER SIMILAR TO THAT AVAILABLE IN NON-HTML FRAMEWORKS LIKE ADOBE 
FLEX, MICROSOFT SILVERLIGHT, AND JAVA SWING. IN THE NEXT SECTION, YOU'LL NS 
LEARN HOW POWERFUL CSS LAYOUT MAY BECOME IN THE NEXT FEW YEARS. 


The future of CSS layout 


CSS3 has several proposed standards currently under heavy develop- 
ment that could completely alter how layout on the web is done. In this 
section, youll learn about these new approaches, all of which have at 
least experimental implementations available. They include flexible 
boxes, which are excellent for toolbars and menus; grid-align, which is 
great for traditional grid-based designs; and regions, exclusions, and 
positioned floats, which are good for multiple-column magazine-style 
layouts. 
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AT THE TIME OF WRITING NONE OF THE APPROACHES IN THIS SECTION ARE SUITABLE 

FOR USE ON A PUBLIC WEBSITE BECAUSE SUPPORT IS JUST TOO SPOTTY. YOU MAY BE 

ABLE TO MAKE USE OF THEM IN A TIGHTLY CONTROLLED ENVIRONMENT SUCH AS AN 
NA INTRANET, A WEB VIEW IN AN IOS OR ANDROID APP, OR A WINDOWS 8 METRO APP. 


|! 


Using flexible boxes for nested layout 


Flexible boxes, commonly referred to as flexboxes, are a layout 
approached developed in Firefox to be used for laying out various ele- 
ments of the user interface. They’re primarily aimed at creating menus 
and toolbars, particularly toolbars made up of nested elements. Cur- 
rently Chrome, Firefox, IE10, and Safari have some support for flex- 
boxes; you'll need to add the relevant prefix to get the listings in this 
section working. 


This section first gives you a quick introduction to flexboxes using this 
simple markup fragment, and then looks at practical use cases and 


issues: 


<div> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
</div> 


To produce five equal-size boxes, Be ee НИСЕ ЛЕЕ п 


mr--|r--4|r--,|r--,|r--| 
y 
I 


L| 

I 

set the parent element to display: i 1 112 f3 l4 pls | 
L| 

L| 


owad lows Pons Iam ad low 
box and set equal box-flex values L 
on the child elements: 
div ( 

width: 90%; 

display: box; 


} 

div div { 
box-flex: 1; 

} 
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Setting a larger box-flex value on ТАГО ae 1 
certain elements causes them to i Z 1 ré i 
take up an increasing proportion L : = рй паана адр р нка 2 
of the spare space: 
div div:nth-child(2) { 

box-flex: 2; 


} 
div div:nth-child(4) { 
box-flex: 3; 


Flexboxes allow elements to be "hse salua sistunt 1 
displayed in a different order than 
their position in the markup: Жен сйм area киы ате 2 
div div { 
box-ordinal-group: 2; 
} 
div div:nth-child(5) { 
box-ordinal-group: 1; 
} 
Because the fifth child is set to be 
ordinal-group: 1, it appears before 
all the elements that are 
ordinal-group: 2. 


Full Partial 


10.0 


Browser support quick check: flexbox 
eoceo 
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Note that even though element 5 is now the first displayed, it’s still the 
fifth element as far as the CSS is concerned. Element 2 and element 4 


have larger box-flex values, even though they're now shown as the 
third and fifth elements. 


Although flexboxes are horizontal by default, they n" 
can also be set to be vertical: 
div { 

width: 5em; 

height: 600px; 

box-orient: vertical; 


wn, ! 
æ Lo 


} 


Note that in both horizontal and vertical cases, you 


“| 


need to specify a length in that direction in order to 


1 
Lt. 


get the flex to appear. This is because the flex dis- 


> 


tributed among the elements comes from the left- 
over space after the intrinsic size of the elements is 


L 


taken away. This can lead to some counter-intuitive 
results when the elements with flex don’t have a 
well-defined intrinsic width. 


This is easily demonstrated by adding some text —the cell will expand 
to contain it. The available space gets used up, so the flex can no longer 


be distributed. 

7 ge ee шш ЖЕ ИШ ШШ Жо e л 

prt =рг=======л а ана ! 

1 15 1 17 4 PC ZAMNEVERREALY 1 1 3 (1 1а р! 

г lew lu ББ еее low Louw" 
І 


15 4 ! 114 ! TAMNEVERREALY SATISFIED 1 ! 3 1 ай 
lla hw E Ес dl Il. 


I 
p ep eq qmm в) ro} 
L| 
I 
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For collections of elements that do have an intrinsic width, flexboxes 
offer an ability that can’t be replicated by tables, display: table, floats, 
or inline-block: they can create flexible grids that can have a variable 
number of elements per row, as with floats and inline-block, but the 


individual elements flex so they exactly fill up each row, as with table 
rows and display: table. This is thanks to the multiline property. The 
following example has a grid of 60 cells, each containing a number. 


At different widths, a different number pet i-o inp: 1 

10 {{2 i 800px 
of elements fit on each row. If you zoom as ee H 
in on a few cells, you can see that they’re possess 1 ree... ` 

к А i . Н tt H 640 

also slightly different widths depending '! FUNEM L rt ----- 1 px 
on the size of the container. eee cave ера : 

Fg IE j 480px 


Following is a snippet of the markup (left) and the CSS (right) 
required for this layout. The key property is box-lines: 


<ul> ul { 
<li>1</li> display: box; 
<li>2</li> box-lines: multiple; 
<li>3</li> } 
<li>4</li> li { 
<li>... display: block; 
„..</11> box-flex: 1; 
</и1> min-width: 3em; 
} 
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Flexbox good Flexbox bad 
CAN MANIPULATE LAYOUT | INTENDED FOR TOOLBARS, 
ORDER WITH CSS. MENUS, AND SO ON RATHER 
MULTILINE GRIDS THAT THAN FULL PAGES. 
EXACTLY FILL THE WEIRD THINGS HAPPEN 
AVAILABLE SPACE. WHEN CONTENT HAS NO 

FIXED INTRINSIC WIDTH. 


Using the C595 Grid Alignment module 


The CSS3 Grid Alignment module 
completely separates the layout from 
the elements in your markup. You 
use CSS to define a grid and then 
assign elements to the grid using a 
Cur- 
rently only IE10 has any support for 
this module, although the WebKit 


support is under development. Fol- 


row and column reference. 


lowing is some simple markup that 
will be turned into the three-column 


layout shown here: 


<body> 
<header>Header</header> 
<aside class="b">Side bar</ 


aside> 
<article>I never am really 
satisfied... etc., etc.</ 
article> 
<aside class="d">Side bar</ 
aside> 
<footer>Footer</footer> 
</body> 


Full Partial 
E е - 19.0* 
o 
Ф 
= 
o 
x 
© 2 s 
Be & 
EI 
EG 
as ae - 10.0 
Qn 
20 
Ф 
х 
Ф 
Ф = . 
: О 
2 
a 
Ө - 3.1 
* Chrome needs a runtime flag to be set to 


enable the experimental support; see 
https://bugs.webkit.org/show_bug.cgi?id 
=60731 for details of progress. 


i 


r 43 r---- 
H 11 
! J NEVER AM REALLY SATISFIED THAT T ss 
+ UNDERSTAND ANYTHING: BECALISE. ‚а 
* UNDERSTAND JT WELL AS T MAY. MY Pg 
1 COMPREHENSTON CAN ONLY ВЕ AN б, 
1 INFINITESIMAL FRACTIONOFALLIWANT — à i 
1 TO UNDERSTAND ABOUT THE MANY 1: 
! CONNECTIONS AND RELATIONS WHICH a 
! OCCUR TO ME. HOW THE MATTER JN б, 
* QUESTION WAS FIRST THOUGHT OF OR i 
! ARRIVED AT. ETC. ETC. Pg 
LI ast 
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A grid is created by defining a set of rows and (or) columns. In this 
example, you'll go ahead and create three columns and three rows on 
the <body> element: 


body { 
display: grid; 
grid-columns: auto 1fr auto; 
grid-rows: auto 1fr auto; 


j 


The first and last rows and columns will shrink to fit their content 
(auto), and the middle cell of each column will flex so the whole thing 
takes up all available Space. These declarations create a conceptual grid 
into which to fit elements. All that remains is to assign the elements to 
the relevant spots of the grid: 


header { grid-column: 1; grid-row: 1; grid-column-span: 3; } 
aside.b { grid-column: 1; grid-row: 2; } 
article { grid-column: 2; grid-row: 2; } 
aside.d { grid-column: 3; grid-row: 2; } 
footer { grid-column: 1; grid-row: 3; grid-column-span: 3; } 


Note that unlike with display: table, it's possible to have elements span- 
ning multiple slots in the layout. This means far less messing around 
with wrapper elements to control the styling. 


As with template layouts, you can rearrange the content by modifying 
the CSS. Here the main content is moved into the top three slots: 


[ 4 ^" 
' 1 
1 J NEVER AM REALLY SATISFIED THAT T UNDERSTAND ANYTHING: BECAUSE, H 
1 UNDERSTAND TT WELL AS T MAY. MY COMPREHENSTON CAN ONLY BE AN H 
1 INFINITESIMAL FRACTION OF ALL J WANT TO UNDERSTAND ABOUT THE MANY — ! 
i H 
LI LI 
' ' 
LI a 


header { 
grid-column: 1; 


grid-row: 2; CONNECTIONS AND RELATIONS WHICH OCCUR TO ME, HOW THE MATTER JN 


} QUESTION WAS FIRST THOUGHT OF OR ARRIVED AT. ЕТС. ETC. 

aside.b { ap AED Betis PIENE 8 : 

> ' а 8° 8 1 

grid-column: 2; 1 HEADER ! + SIDEBAR ! 1 FOOTER ! 

L LIDIIIII a baer eee и иш иш иш эш иш иш иш иш эш иш иш ш иш иш и иш иш эш ш ш шош шшш - b --— a 
grid-row: 2; 

аала mm an ane алави GR OD AB ERR AUD AD па SDN GB ORAN GR UR а ODD ER OD ED UR UB AR аа AB AB DDR OA ADD. GR EAR E RR. 3 

} 1 SIDEBAR 

6656021465903 эш эш эш эш эш тш эш тт тт 06 ЕЕЕ Я тш ш тт nnmnnn я 
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article { 
grid-column: 1; 
grid-row: 1; 
grid-column-span: 3; 


} 

aside.d { 
grid-column: 1; 
grid-row: 3; 
grid-column-span: 3; 

} 

footer { 
grid-column: 3; 
grid-row: 2; 

} 


NOTE THAT EVEN THOUGH GRID-ALIGN GIVES YOU THE OPPORTUNITY ТО 
COMPLETELY SEPARATE YOUR MARKUP FROM THE LAYOUT, THIS DOESN'T MEAN YOU 
SHOULD THROW YOUR CONTENT INTO THE HTML WILLY-NILLY. REMEMBER THAT MANY 
USERS OF YOUR CONTENT, SUCH AS SCREEN-READER USERS AND SEARCH ENGINES, 
DON'T CARE TOO MUCH ABOUT THE LAYOUT YOU'VE ACHIEVED WITH CSS—YOUR 

W^ CONTENT SHOULD MAKE SENSE IN THE ORDER IT APPEARS IN YOUR MARKUP. 


More complex layouts are possible if you nest elements. Adjust the 
body of your example page to contain the following markup; you'll 
then use a nested grid to lay out the content elements: 


<header>Header</header> 

<aside>Side bar 1</aside> 

<div> 
<article>Content 1</article> 
<article>Content 2</article> 
<article>Content 3</article> 
<article>Content 4</article> 
<article>Content 5</article> 
<article>Content 6</article> 

</div> 

<aside>Side bar 2</aside> 

<footer>Footer</footer> 


The relevant CSS (excluding some rules to add fonts, borders and pad- 
ding) is shown next. The <body> element this time contains a two-column 
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layout with four rows, but you also assign a two-column, three-row lay- 
out to the <div> element: 


body { 
display: grid; 
grid-columns: auto 1#г; 
grid-rows: auto 1fr 1fr auto; 


} 

div { 
display: grid; 
grid-columns: 1fr 1fr; 
grid-rows: 1fr 1fr 1fr; 

} 


Now distribute the elements around the grid, making the <div> span 
two rows: 


header { grid-column: 1; grid-row: 1; grid-column-span: 2; } 
aside:nth-of-type(1) { grid-column: 1; grid-row: 2; } 
aside:nth-of-type(2) { grid-column: 1; grid-row: 3; } 
footer { grid-column: 1; grid-row: 4; grid-column-span: 2; } 
div { grid-column: 2; grid-row: 2; grid-row-span: 2; } 


Because the «article» elements are all children of the <div> element, the 
row and column references are for the grid defined on the <div>: 


article { min-height: 2em; } 
article:nth-child(1) grid-column: 1; grid-row: 1 
article:nth-child(2) grid-column: 2; grid-row: 1 
article:nth-child(3) grid-column: 1; grid-row: 2; 
article:nth-child(4) grid-column: 2; grid-row: 2 
article:nth-child(5) grid-column: 1; grid-row: 3 
article:nth-child(6) grid-column: 2; grid-row: 3 


i 
i 
i 
i 
i 
i 


ww € чә чә чә чә 


See the full listing in ch08/grid-align-3.html. 


The ability of the grid-based layouts to rearrange content with only 
CSS makes them an ideal complement to media queries. You'll now 
adapt the previous example to make it respond to media queries. 
Here's what the layout will look like at lower screen resolutions (see 


the full listing in ch08/grid-align-4.html). 
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640px width 480px width 
ооо олы EHUER " 
' ' 
1 HEADER ' 
p w———————— 4 
сананар a Ta Ea aOR { 
' ' 
' SIDEBART а 4 CONTENT І 3 
СЕБЕК == ^ bw ee == = шее к е ———— = a 
pt————-- "opu — E 
' ' 
§ SIDEBAR 2 ae CONTENT 3 L 
== = ^ ь===== == = єє = == шш шош ш ош ш = = = шш =ош єшш a 
MEUM ete ce : 
LI 
* CONTENT 5 , 
m —— аш аш а а аш аш аш аш эт а 
e a a aeneae yaara eonna Я 
' Uu 
Ч CONTENT 2 $ 
bee == = == = == "Sm a 
иииишииццшццищцщшцщц : 
! CONTENT 4 ' 
m ——————————— ^ 
m MA ME - 
' ' 
Ч СОМТЕМТ 6 ' 
с=ш= LLL a 
BERMERL UMANE RUKDN RU OD KCRPEDNEMAK a 
LI ' 
1 FOOTER ' 
Раа EE A E A A 4 


To start with, define the single-column, small-screen layout: 


body { 
display: grid; 
grid-rows: auto; 
grid-columns: 1#г; 
} 
header { grid-row: 1; } 
#sidebar ( grid-row: 3; } 
Zcontentl { grid-row: 2; } 
#content2 { grid-row: 4; } 
footer { grid-row: 5; } 


For windows 600 pixels wide and greater, you'll switch to a two- 
column layout. Note that although the grid can be easily redefined on 
the body rule, the elements must be explicitly slotted into that grid: 


@media screen and (min-width: 600px) { 
body { 
grid-columns: auto 1fr; 
grid-rows: auto 1fr 1fr auto; 
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header { grid-column: 1; grid-row: 1; grid-column-span: 2; } 
#sidebar { grid-column: 1; grid-row: 2; grid-rowspan: 2; } 
#content1 { grid-column: 2; grid-row: 2; } 
#content2 { grid-column: 2; grid-row: 3; } 
footer { grid-column: 1; grid-row: 4; grid-column-span: 2; } 


} 


This CSS defines a three-column grid for windows wider than 760 pix- 
els. Again, the slot locations have to be explicitly set: 


@media screen and (min-width: 760px) { 
body { 
grid-columns: auto 1fr 1fr; 
grid-rows: auto 1fr auto; 
} 
header { grid-column: 1; grid-row: 1; grid-column-span: 3; } 
#sidebar { grid-column: 1; grid-row: 2; } 
#content1 { grid-column: 2; grid-row: 2; } 
#content2 { grid-column: 3; grid-row: 2; } 
footer { grid-column: 1; grid-row: 3; grid-column-span: 3; } 
} 
GRIDS OFFER GREAT FLEXIBILITY IN LAYING OUT ELEMENTS ON THE PAGE AND 
SOLVE NEARLY ALL THE ISSUES DESIGNERS HAD WITH CSS LAYOUTS COMPARED TO 
TABLE-BASED LAYOUTS. BUT THE ELEMENTS BEING LAID OUT ARE STILL NS 
ESSENTIALLY SQUARE BOXES WITH A FIXED AMOUNT OF CONTENT. IN THE NEXT 


SECTION, YOU'LL LEARN ABOUT A PROPOSAL THAT LETS YOU FIT YOUR CONTENT 
INTO ANY SHAPE AND SPREAD IT ACROSS MULTIPLE ELEMENTS. 


Controlling content flow with C555 Regions 


In print-publishing tools such as Adobe m adu 
InDesign, it's common to create several 2 

text boxes and then link them together $ е - 19.0 
so the content added to them automati- E 

cally overflows from one box to the next. E е E - 
In this paradigm, text flows automati- $ 

cally from one region of the page to Е её : 10.0 
another and from one page to another — 8 

you don’t need to calculate how much 2 О : я 
text will fit in each region. You specify 3 

some text and a collection of regions, 8 @ E 5.2 
and the application takes care of the rest. 
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Adobe is a W3C member and has decided to give similar capabilities to 
web authors — this fulfills a dual goal of making web layout more pow- 
erful for web designers while making it easier for Adobe to generate 
content straight to the web from its print-publishing tools. To this end 
they have proposed the CSS3 Regions module. Adobe has helped 
implement support for their proposal in WebKit, and IE10 also has pre- 
liminary support. Here's an example page layout created with the new 
Regions module. 


ONE ESSENTIAL OBJECT 15 TO 
CHOOSE THAT ARRANGEMENT WHICH 
SHALL TEND TO REDUCE TO A 
MINIMUM THE TIME NECESSARY FOR 


STUDIES IMAGINE THAT BECAUSE 


IT WELL AS I MAY. MY M COMPLETING THE CALCULATION. 
COMPREHENSION CAN - 

Y BE Mi И] МАКУ PERSONS WHO ARE NOT 
INFINITESIMAL | CONVERSANT WITH MATHEMATICAL 


ABOUT THE MANY ТМ ALMOST EVERY COMPUTATION A GREAT 
CONNECTIONS AND VARIETY OF ARRANGEMENTS FOR THE 
RELATIONS WHICH SUCCESSION OF THE PROCESSES IS POSSIBLE. 
OCCUR TO МЕ, HOW THE AND VARIOUS CONSIDERATIONS MUST 
MATTER IN QUESTION INFLUENCE THE SELECTIONS AMONGST THEM 
WAS FIRST THOUGHT OF FOR THE PURPOSES OF A CALCLILATING ENGINE. 


The previous screenshot PME ae erty Hen Be 
шло A — be REDE TO 
shows three text boxes. The fr veut атте тп CoeTbe ne далым \ 
diagram at right outlines each [C A Correr ик rtr 
& & wom o a 3 EARSRELACT T7777" y nene muone төт Mouse 
. . WT TO UMDERSTA, ! ' 
box explicitly. The content in ons an a or A T 
FELT IONS WOE MUCCESSION OF THE PROCESSES 15 POSSIBLE! 
the boxes flows between them COTTER Di QUESTIO, DAUM THE SELECTION томот TM 


without having to be assigned 
to one box or another as 
would normally be required 
on a web page. 


The HTML contains four <div> <div id-"source"» 
<p>I never am really 


satisfied. ..</p> 


<p>In almost every 
content: a set of four para- computation...«/p» 


elements. The «div» with id 
value source contains all the 


graphs. <p>Many persons who...«/p» 
<p>The Analytical Engine...«/p» 
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This is followed by three </div> 
empty <div> elements, all with ау id="region1" class="region"> 
lass of region. You'll f pow 
VOS EMI кепп. кы jd «div id="region2" class="region"> 
the content into these three </div> 
empty <div> elements. <div id="region3" class="region"> 
</div> 


<img src="00092.jpg" class="video"> 
<img src="dust-puppy.png" 
class="dp"> 


The magic happens in the #ѕоигсе{ 
CSS. First the source <div> is нац са т. 

. ext-align:justify; 
assigned to flow1. Then the aa " 


declaration for elements with a OR { 

class of region says to take the flow-from: flow1; 
content for these elements } 

from the flow that has just 

been defined. 


The remainder of the CSS 
positions the region elements 
on the page as shown earlier. 


Check out ch08/regions- 
].html file for the full code. 


Making complex shapes with C555 Exclusions and Shapes 
The CSS3 Exclusions specification allows you to wrap content in and 
around complex shapes. This spec was also born out of Adobe's pro- 
posals; initially it was for shaping the regions now in the CSS3 Regions 
specification. The following layout can be achieved with a tweak to the 


aw THE SELECTIONS AMONGST THEM FOR THE EXACTLY 
REALLY PURPOSES OK ^ CALULATING ENGINE ONE as І Tey 
SATISFIED ESSENTIAL OBJECT 75 TO обом THT WERE LETTERS 
тит 1 ARRANGEMENT WNION SHALL TEND TO REDUCE TO А OR MW OTER 
UNDERSTAND. MINIMUM THE TIME NECESSARY FOR COMPLETING THE DER умо 
ANYTMING: — BECAUSE. CALOULAT ON. AD Di FACT 3T мит 
UNDERSTARD. TT WELL 45 р OUT 175 RESULTS DI 


MARY PERSONS WO ARE NOT CONVERSANT WITH 


MAY. мү COMPREMEMSZON CAN 
= MATHEMATICA STUDIES DMODE THAT BECAUSE THE 


OLY B6 AN TDENITISDUL 


FRACTION OF M 1 WAT TO RODE OF [IRARÓAGES AWALYTICAL ENDEN T$ TO 


UDENSTMD молт те PAN GIVE 175 RESULTS Di NUMERICAL, NOTATION THE тє жт БОРЕ тд NO 
CONNECT TONS MO RELATIONS эмн OCCUR NATURE. OF ITS PROCESSES MUST CONSEQUENTLY BE PRETENÓIONÓ WUTEVER TO ORTÓDATE 
TO МЕ NOW THE MATTER IN QUESTION WS ARITWMETICAL ФО MUMENILAL RATHER THW метир. үт CAN DO WHATEVER WE KNOW 
FIRST THOUGHT OF OR ARRIVED AT. ETC. ETC ALGEBRATCAL. AO ANALYTICAL THES T$ AN Ow TO ORDER IT TO PERFORM IT CAN FOLLOW 

ERROR THE ENG DE лн RANGE ^D AMVLYSTS, BUT 7T MAS NO POWER OF ANTICIPATING 
IN ALMOST EVERY COMPUTATION A GREAT VARIETY OF OODE ITS MPERA АМҮ AMALYTICAL RÉVELATIOMG OR TRIS ITS 
ARRANGEMENTS FOR THE SIILESOJON OF THE PROCESSES омтр PROVINCE. 25 ТО 6:57 US рі макро AUATLABLE WHAT 
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CSS from the last example in the previous section. The key difference 
from the previous example is the addition of the wrap-shape-mode and 
wrap-shape properties: 


.region { 
flow-from: flow1; 
wrap-shape-mode: content; 
wrap-shape: polygon( 
Opx,160px 20px,232px 40px,262px 
60px,282px 80px,296px 100px,305px 120px,313px 
140px,316px 160px,320px 180px,316px 200px,313px 
220px,305px 240px,296px 260px,282px 280px,262px 
300px,232px 320px,160px 300px,90px 280px,52px 
260px,34px 240px,20px 220px,10px 200px,4px 
180рх,1рх 160px,0px 140рх,1рх 120px, 4px 
100рх,10рх 80px,20px 60px,34px 40рх, 52px 
20px,90px Opx, 160px 
); 
} 
#region1 { 
wrap-shape: polygon( 0px,320px Opx,Qpx 320px,320px 0px,320px ); 
H 
#region3 { 
wrap-shape: polygon( 0px,320px 320px,0px 320px,320px 0px,320px ); 
} 


The shapes don’t have to contain content — they can also exclude it. This 
is what the CSS3 Exclusions module is concerned with. The syntax is 
exactly the same as for Regions, but instead of content flowing into the 
shapes, the content is flowed around them. 


In this example, the сопіепі ОТТ 
тн br ese ннер = “кете элә слу онла SCAU 
is di i IOONIDE бут DEUE тє. Peterio moor Тил ron Te тоз 
15 displaying as norma Ok Аал рө ODE. ое жота. ORT I» TO бос Тит 
еф 1 “on ошто me сел 
inside the #source element. © OMIT мт MONICA PITE IMODE 
€ To ane sro ат, Dx 
Then the shapes are abso- VE mene MENT 
THETIC. пл. 
+ ™ ALOCPRATCAL. ^e 
lutely positioned over that татил AM M M Mas 
ol Sena. теа же тист ТТ КИ IR QUY уте RENA TS ил атанг? NOTAT SON MERE 
content. This is changed by Foetous wot NCOROLY THe MATER DODE NS м MTD ATENEA TO 
Ошәлите meta. om го TUVO ne than Wow TO Ona тт TO TECHN Т ОМ 


using the around keyword TRUTHS. ITS PROVINCE 19 TO ABOEST US TN MNCING AVAILADLE WHAT WE ARE. ALREADY ACQUAINTED WITH 


instead of content: 


wrap-shape-mode: around; 
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The Exclusions spec is still under heavy development, but it represents 
some useful additions to the web author’s toolkit. Positioned floats are a 
concept created by the IE team at Microsoft; they first appeared in 
IE10 Platform Preview 2. They achieve results similar to the exclusions 
so they have been folded into the Exclusions spec. To demonstrate, 
let’s use a simple page with five paragraphs: 


<p>I never am really satisfied. ..</p> 

<p>In almost every computation. . . </р> 

<p>Many persons who are not...</p> 

<p>The Analytical Engine has no pretensions. ..</p> 
<p>The Analytical Engine weaves algebraic patterns. ..</p> 


Making the last paragraph a positioned float is as simple as setting the 
both value for the wrap-flow property: 


p:last-child 1 J NEVER AM REALLY SATISFIED THAT J UNDERSTAND ANYTHING: BECAUSE. UNDERSTAND JT WELL AS 7 
MAY, MY COMPREHENSION CAN ONLY BE AN TNFTNITESTMAL FRACTION OF ALL 7 WANT TO 
width: 200px; UNDERSTAND ABOUT THE MANY CONNECTIONS AND RELATIONS WHICH OCCUR TO ME. HOW THE 
ý 2 MATTER JN QUESTION FIRST THOUGHT OF OR ARRIVED AT. 
sas ETC.ETC. 
position: absolute; 
JN ALMOST EVERY ‘ATION A GREAT VARTETY OF 
= Ы . ARRANGEMENTS FOR THE ТОМ OF THE PROCESSES 75 
wrap Flow: both; POSSTBLE. AND VARTOUS TDERAT TONS MUST INFLUENCE THE 
t : 75 x SELECTIONS AMONGST FOR THE PURPOSES OF A CALCULATING 
op: Px; ENGINE. ONE ESSENTIAL 75 TO CHOOSE THAT ARRANGEMENT 
WHICH SHALL TEND TO REDUCE TO A MINTMUM THE TIME NECESSARY FOR COMPLETING THE 
left: 250px; CALCULATION 
} MANY PERSONS WMO ARE NOT CONVERSANT WITH MATHEMATICAL STUDTES JMAGINE THAT BECAUSE 
IBABBAGE'S ANALYTICAL ENGINE] JS TO GIVE JTS RESULTS JN NUMERICAL 


THE 
NOTATION THE NATURE OF ITS PROCESSES MUST CONSEQUENTLY BE ARTTHMETICAL AND 
NUMERTCAL. RATHER THAN ALGEBRATCAL AND ANALYTICAL. THIS 75 AN ERROR THE ENGINE CAN 
All h h fl W ARRANGE AND COMBINE ТТ NUMERICAL QUANTITIES EXACTLY AS JF THEY WERE LETTERS OR ANY 
t e ot er text о 5 OTHER GENERAL SYMBOLS: AND TN FACT JT MIGHT BRING OUT JTS RESULTS ТМ ALGEBRATCAL 
NOTATION. WERE PROVISIONS MADE ACCORDINGLY. 


around the positioned float. THE ANALYTICAL ENGINE HAS NO PRETENSTONS WHATEVER TO ORTGINATE ANYTHING. ТТ CAN DO 
: WHATEVER WE KNOW HOw TO ORDER TT TO PERFORM TT CAN FOLLOW ANALYSIS, BUT JT HAS NO 
POWER OF ANTICIPATING ANY ANALYTICAL RE) TJ OR TRUTHS. JTS PROVINCE 75 Ti 7: 
Other possible values are US IN PHONG AATLABLE WHAT WE ARE ALREADY ACQUASNTED WITH icd 


start and end, which allow 
the text to flow only past the 
start or end of the object, 
leaving the other side empty, 
and minimum and maximum 
which allow flow only into 
narrowest or widest sides, 
respectively. 
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In the last example, the 
floated element looked a bit 
cramped. You can apply spac- 
ing to positioned floats with 
the wrap-margin property: 
p:last-child { 

width: 200px; 

position: absolute; 

wrap-flow: both; 

wrap-margin: lem; 

top: 75px; 

left: 250px; 


To demonstrate an alternative 
effect, let's arrange the other 
paragraphs into four 


columns: 
p { display: table-cell; } 


You can see that the text still 
flows around the floated ele- 
ment, even though the four 
paragraphs are independently 
positioned. 


J NEVER AM REALLY SATISFIED THAT J UNDERSTAND ANYTHING: BECAUSE. UNDERSTAND JT WELL AS T 
MAY. MY COMPREHENSTON CAN ONLY BE AN TNFTNTTESTMAL FRACTION OF ALL 7 WANT ТО 
UNDERSTAND ABOUT THE MANY CONNECTIONS AND RELATIONS 
WHICH OCCUR TO МЕ. HOW THE MATTER ТМ GUESTION WAS: 
FIRST THOUGHT OF OR ARRIVED AT. ETC. ETC. 

JN ALMOST EVERY COMPUTATION A GREAT VARTETY OF 
ARRANGEMENTS FOR THE SUCLESSION OF THE PROCESSES JS 
POSSIBLE. AND VARTOUS CONSIDERATIONS MUST TNFLUENCE THE 
SELECTIONS AMONGST THEM FOR THE PURPOSES OF A 
CALCULATING ENGINE, ONE ESSENTIAL OBJECT 7$ TO CHOOSE 
THAT ARRANGEMENT WHICH SHALL TEND TO REDUCE TOA 


MINIMUM THE TIME NECESSARY FOR COMPLETING THE CALCULATION 


MANY PERSONS WHO ARE NOT CONVERSANT WITH MATHEMATICAL STUDTES JMAGINE THAT BECAUSE 
THE BUSINESS OF IBABBAGE'S ANALYTICAL ENGINE] 75 TO GIVE JTS RESULTS JN NUMERICAL 
NOTATION, THE NATURE OF JTS PROCESSES MUST CONSEQUENTLY BE ARTTHMETTCAL AND 
NUMERICAL. RATHER THAN ALGEBRATCAL AND ANALYTICAL. THIS T5 AN ERROR THE ENGINE CAN 
ARRANGE AND COMBINE JTS NUMERICAL QUANTITIES EXACTLY AS JF THEY WERE LETTERS OR ANY 
OTHER GENERAL SYMBOLS: AND TN FACT ТТ MIGHT BRING OUT TTS RESULTS ТМ ALGEBRATCAL 
NOTATION WERE PROVISIONS MADE ACCORDINGLY. 


THE ANALYTICAL ENGINE HAS NO PRETENSTONS WHATEVER TO ORTGINATE ANYTHING. JT CAN DO 
(WHATEVER WE KNOW HOW TO ORDER JT TO PERFORM JT CAN FOLLOW ANALYSTS. BUT JT HAS NO. 
POWER OF ANTICIPATING ANY ANALYTICAL REVELATIONS OR TRUTHS, ITS PROVINCE JS TO ASSIST 
US ТМ MAKING AVATLABLE WHAT WE ARE ALREADY ACQUATNTED WITH. 


TNEVER AMREALLY ЈМ ALMOST EVERY MANY PERSONS WHO АКЕ THE ANALYTICAL 
SATISFIED THAT 7 COMPUTATION AGREAT NOT CONVERSANT WITH ENGINE HAS NO 


UNDERSTAND VARTETY OF MATHEMATICAL STUDJES PRETENSTONS 

ANYTHING: TMAGINE THAT WHATEVER TO 
BECAUSE THE ORTGINATE 
BUSINESS OF ANYTHING. IT CAN DO 
1ВАВВАСЄ 5 WHATEVER WE KNOW 
ANALYTICAL HOW TO ORDER IT TO 


ENGINE] ISTO PERFORM JT CAN 
GIVE ITS RESULTS FOLLOW ANALYSIS, 
TN NUMERICAL BUT JT MAS NO 
NOTATION THE POWER OF 

NATURE OF JTS ANTICIPATING ANY 


CONNECTIONS AND ARRANGEMENTS FOR THE 
RELATIONS WHICH SUCCESSION OF THE PROCESSES MUST 


MATTER JN QUESTION AND VARTOUS. TRUTHS. 775 

WAS FIRST THOUGHT CONSIDERATIONS MUST NUMERICAL. RATHER THAN PROVINCE 7$ TO. 
OF OR ARRIVED AT. — JNFLUENCE THE ALGEBRATCAL AND 

ЕТС.ЕТС SELECTIONS AMONGST ANALYTICAL. ТНІЅ75 AN MAKING AVATLABLE 


WHICH SHALL TEND TO GENERAL SYMBOLS: AND JN 


COMPLETING THE ALGEBRATCAL NOTATION. 
CALCULATION WERE PROVISJONS MADE 
ACCORDINGLY. 


Browser support for these new features is still fairly patchy, but they’re 


worth exploring now so you can be prepared for the future. 


Browser support 


As discussed in the introduction, browser support for CSS layout has 


long been an issue. Everything in the CSS2 spec is now implemented in 


all major browsers: that includes everything discussed in the section 


“Underused CSS2 layout features.” Support for the other features 


we've discussed is patchier, reflecting the experimental nature of the 


specifications. The following table shows the details. 
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12 
inline-block ° 
display: table e 
calc 
box-sizing е 
Media queries e 
Flexboxes о 


Multiline flexboxes 
Templates/grids 
Regions 


Exclusions 


14 4 6 8 


e e е LJ 
e e. LJ LJ 
о о 
e. о о 
е е е 
о [еј о 


10 


12 


5.1 


Кеу: 


e Complete or nearly complete support 
o Incomplete or alternative support 


Little or no support 


inline-block in IEG and IE7 


Although IE didn't add support for inline-block until version 8, it's pos- 


sible to achieve the same effect by taking advantage of some nonstan- 


dard behavior. IE has an internal concept called hasLayout that endows 


elements with special properties as far as the layout engine is con- 


cerned. For our current purposes, the only thing you need to know is 


that an element that is display: inline but also hasLayout will behave 


like an inline-block element in other browsers. 


One of the simplest ways to trigger hasLayout is to use the IE-specific 


CSS extension zoom with a value of 1 (which makes no visible differ- 


ence), coupled with the star hack: 


display: inline-block; 


*display: inline; 
zoom: 1; 
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Most browsers will ignore the second two properties as invalid, 
whereas IE7 and earlier will ignore the first property but process the 


second two. 


calc in Chrome and Firefox 


Firefox requires the -moz- prefix for calc while Chrome requires 
-webkit-. For maximum support, you should specify four rules — one 
for browsers with no calc support, one for Firefox, and one for stan- 


dards-compatible browsers (currently only IE): 


width: 2396; 

width: -moz-calc(100X/4 - 10px); 
width: -webkit-calc(100X/4 - 10px); 
width: calc(100%/4 - 10px); 


This code sets the element width to 23% in browsers that have no sup- 
port for calc апа 100%/4—10px for any browser that does support it. 


box-sizing in Firefox and Safari 5 


Firefox and older versions of Safari require a -moz- prefix for box-sizing: 


-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 


If you need to support IE8, because of the significant impact the box 
model can have on your layout, it's best to use either IE conditional 
comments or modernizr.js to provide alternative rules to that browser. 


Flexboxes in Chrome, Firefox, IE, and Safari 


Currently, prefixes are required in all browsers that support flexboxes. 
To get maximum support, you need to specify each property four times: 


div 1 
display: -moz-box; 
display: -webkit-box; 
display: -ms-box; 
display: box; 
-moz-box-orient: vertical; 
-webkit-box-orient: vertical; 
-ms-box-orient: vertical; 
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box-orient: vertical; 


} 

div div { 
-moz-box-flex: 1; 
-webkit-box-flex: 1; 
-ms-box-flex: 1; 
box-flex: 1; 

} 


This code sets the parent <div> element to be a flexbox container and 
gives any child <div> elements the same amount of flex in all browsers 
that have support. 


Media queries and old browsers 

If a browser doesn't support media queries, then it won't apply any of 
the rules listed in a media query section. Any rules outside of a media 
query section will constitute the default state of your site, so you should 
always consider the sorts of devices the majority of your users will be 
browsing with. If your site is primarily for desktop users, then your 
default styles should be aimed at a desktop-style layout — around 1000 
pixels wide and (most likely) using an older version of IE. If your site is 
more mobile focused, then it would be better to target a small screen by 
default and add media queries to improve the experience in modern 
desktop browsers. 


Regions and exclusions 
Although IE10 and Chrome both have some support for these modules, 
there are several limitations. In IEIO the source content for flow-into 
must be an iframe. In Chrome 17-20 you must explicitly enable support 
for regions in the about: flags page. Neither browser has much support 
for shaped exclusions, but IE10 does support rectangular exclusions. 


Summary 


In this chapter, you've learned about some of the murky past of CSS 
layout and how the situation has improved thanks to the gradual 
decline of old versions of IE, allowing the use of the full range of CSS2 
layout tools. New features like box-model, calc, and media queries 
already have wide support and promise to improve the situation even 
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further. Finally, you've glimpsed the bright future of CSS layout, 
thanks in no small part to the new versions of IE—flexboxes, tem- 
plates, grids, and exclusions promise to make web page layout much 
easier and more flexible. 


TO STAND OUT FROM THE CROWD, WHAT YOUR WEB PAGE NEEDS ISN'T AN 
ELEGANTLY CODED THREE-COLLIMN LAYOUT —Y OLI WANT COLOR, 
MOVEMENT, AND INTERACTIVITY. IN THE NEXT CHAPTER, YOU'LL START 
TO LEARN ABOUT THE FLASHIER ASPECTS OF CSS3 AS WE LOOK AT 
COLORS, TRANSFORMATIONS, TRANSITIONS, AND ANIMATIONS. 
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This chapter covers 


* Making elements semitrangparent with the opacity property 
* Making colore semitrangparent with RGBA 
• A new, more intuitive way to specify color: HSL and НІА 


* Natural user interaction with transitions and animation 


In this chapter, we'll look at some of the snazzier aspects of CSS5— fea- 
tures that are much loved by graphic designers. 


USER FRIENDLY by J.D. "illiad" Frazer 
IS ALREADY BEINK THREE icss ISN'T FOR MONITORS, IT'S FOR 
WAYS TO SET COLOR IN css |$PEOPLE. DESIGNERS MORE OFTEN 
WHY NEEDINK TWO NEW ONES? |: WANT COLORS WHICH DIFFER ONLY 
MONITOR 15 BEINK RED GREEN [ZIN LIGHTNESS OR SATURATION 
BLUE, SENSIBLE KEEPINK CSS |E 


CRAZY DESIGNERS! WEB 
IS BEINK BETTER IN 
BLACK AND WHITE ANYWAY 
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Colors and opacity 


In the beginning, the web was black and white, but these days there 
arent many websites that don't make extensive use of color. It's 
unlikely the web will revert to black and white any time soon, so its a 
good thing CSS3 includes several new features for colors. Later in this 
section, you'll learn about RGBA, HSL, and HSLA. First, though, let's 
investigate how CSS3 allows you to achieve another popular effect in 
modern web design: semitransparency with the opacity property. 


Opacity 


Opacity is a measure of what percentage of light is blocked by an object. 
In the case of HTML and CSS, the objects are elements on the page. 
They are, by default, fully opaque; no light is allowed through, so you 
can see nothing of the elements beneath (that is, earlier in the source 
code). If a paragraph has a blue background, it completely obscures 
any background on the element that contains the paragraph. 


Standard Prefixed 


е 1.0 - 
е 1.0 0.8 
a 9.0 E 
О 9.0 : 
& 12 1.0 


IE has been able to do transformations 
with the nonstandard filter attribute 
since version 5.5. 


Browser support quick check: opacity 


* 


Opacity can be used to de-emphasize page elements to let your user 
focus on a single important task. This is commonly seen on the web in 
the ubiquitous lightbox, shown in action here. 
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Lightbox 


Before: The normal busy page. After: The rest of the page is hid- 

The user has lots of options. den behind a semitransparent 
layer so the user can concentrate 
on the picture. 


IN THIS CHAPTER THE CSS EXAMPLES OMIT SIZING INFORMATION SO THAT YOU 
CAN FOCUS ON THE RULES FOR APPLYING OPACITY, COLOR, AND MOTION. IF 


D YOU'RE RE-CREATING THE EXAMPLES FROM THE TEXT YOU'LL USUALLY NEED 


TO ADD THE FOLLOWING RULE TO REPLICATE THE SCREENSHOTS: 
div { 
display: inline-block; 


a margin: 0.5em; 


padding: 0.5em; 


ба —) } 


IN ADDITION TO THE ABOVE, SOME OF THE EXAMPLES USE Awidth: 12em; PROPERTY. 


and 1. The fully opaque default is 1, 
and 0 is fully transparent: OPACITY:O.8 
div { 

background-color: #666; 


color: #ccc; 
border: 4px solid #ccc; 


The opacity property is straightfor- 
ward: you specify a value between 0 OPACITY :1 


div:nth-child(1) { opacity: 1 
div:nth-child(2) { opacity: 0. 
div:nth-child(3) { opacity: 0. 
div:nth-child(4) { opacity: 0 
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div:nth-child(5) { opacity: 0.2; } 
div:nth-child(6) { opacity: 0; } 
When all the elements are sitting 
against the same white background, 
the effect of decreasing opacity is the 
same as using lighter colors. The full 
code for this example is in ch09/opac- 


ity-1.html. 


Acommon use of opacity is to make a continuous pattern or background 
image always be visible without clashing with the main content. Here 
the <h1> element lies on top of the <div> that contains it, but opacity is 
used to let the background of the <div> be partly visible through the <h1>: 


body { 
background-color: #666; WHAT ARE WE DOT 
} 
div ( OPACITY 
background: url(example. png) 
no-repeat 50% 50%; 


75 COOL 


} 

h1 { mu IY 
background-color: #fff; 
color: #000 
Opacity: 0.75; 

} 


Here’s the markup. You can see the full listing іп ch09/opacity-4.html: 


<body> 
<div><h1>Opacity is cool</h1></div> 
</body> 


Although the opacity property isn’t inherited in the CSS sense, the 
opacity of the parent element affects that of its child elements. In the 
following example, on the right (listing ch09/opacity-2.html), all the 
child elements are invisible because they’re contained within an 
element that isn’t visible, regardless of their individual opacity values. 
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This is the same as setting an element to visibility: hidden—the ele- 
ment isn’t visible, but it’s still taking up space on the page. On the left 
(listing ch09/opacity-3.html), the outer element is fully visible, but 


transparent child elements don’t cut holes in their opaque parents. 


Descending opacity Ascending opacity 


OPACITY :1 


div > div > div > div > div > div div > div > div > div > div > div 

{ opacity: 0; } { opacity: 1; } 
div > div > div > div > div div > div > div > div > div 

{ opacity: 0.2; } { opacity: 0.8; } 
div > div > div > div div > div > div > div 

{ opacity: 0.4; } { opacity: 0.6; } 
div > div > div { opacity: 0.6; } div > div > div { opacity: 0.4; } 
div > div { opacity: 0.8; } div > div { opacity: 0.2; } 
div { opacity: 1; } div { opacity: 0; } 
<div><div><div><div><div><div> <div><div><div><div><div><div> 

opacity : 0 Opacity : 1 
</div> </div> 
Opacity : 0. 2 Opacity : 0. 8 
</div> </div> 
opacity : 0. 4 opacity : 0. 6 
</div> </div> 
Opacity : 0. 6 Opacity : 0. 4 
</div> </div> 
Opacity : 0 . 8 Opacity : 0 . 2 
«/div» «/div» 
opacity : 1 opacity : 0 

</div> </div> 
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MIRANDA'S ACRONYM CHEAT SHEET 


WE TECHIES LOVE OUR ACRONYMS. LET ME 
EXPLAIN THE COMMON ONES IN THIS CHAPTER: 
RGB, RGBA HSL, AND HSLA THE SEVEN LETTERS 
MEAN THE SAME THING IN ALL FOUR. 
R = RED НЦЕ= Н 
б = GREEN SATURATION = S 
B = BLUE LUMINOSITY = L 


A= ALPHA (OPACITY) =A 


RGBA 


Sometimes you don’t want to make an WHAT ARE WE роти? 


OPACITY 
75 COOL 


entire element transparent or semi- 
transparent. If you refer back to the 
example from listing ch09/opacity- 
Á.html, the text and the background 


are semitransparent. 


=a EI (£j 


If you want people be able to read large amounts of text like this, then 
a semitransparent background would be better combined with fully 
opaque text. Rather than make the entire element semitransparent, 
CSS3 provides several ways of specifying color values that have a level 
of transparency, the first of which is rgbaO. You can use rgba( to make 
just the background transparent. If you're used to the hexadecimal 
shorthand for specifying colors, these two diagrams show how they're 


related. 
RED COMPONENT. | „--- GREEN COMPONENT RED COMPONENT . "E BLLIE COMPONENT 
OO-FF * ,"  oo-F 0-255 E ; 0-255 
Y Y Y 
background: #666666; background: rgba(102, 102, 102, 0.5); 
opacity: 0.5; A 4 
A 222 DUE COMPONENT GREEN COMPONENT - -*' - 
OPACITY ---*" O-255 ALPHA TRANSPARENCY 
00-10 ОО-О! 


50% opacity element witha Element with a background that is 
dark gray background both dark gray and 50% opacity 
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Full Partial 
c 
o 
СЕЗЕ 
а 
E 
Ф| 
е». 
x 
& 
3 
е. 
о 
о. 
3 
The primary benefit is that the opacity 5 О 100 z 
is now confined to the background — E: 
, 2 
the rest of the element’s contents and m @ 3.1 : 
attributes can be full opacity. 


The difference is even more pro- 
nounced for the nested element exam- 
ple, where previously setting the outer 
element to transparent made the entire 
set of elements disappear. 


See the full code for this example in 
listing ch09/rgba-2.html. 


With transparency confined to the 
background and not inherited, the text 
and borders remain visible on all the 


elements: OPACITY :1 


: . А : . ; OPACITY:O.8 
div > div > div > div > div > div { 


background-color: OPACITY: 0.6 
rgba(102,102,102, 1); } 
div > div > div > div > div { 
background-color: 
rgba(102,102,102, 0.8); } 
div > div > div > div { 
background-color: 
rgba(102,102,102, 0.6); } 
div > div > div { 
background-color: 
rgba(102,102,102, 0.4); } 
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div > div { 
background-color: 
rgba(102,102,102, 0.2); } 
div { 
background-color: 
rgba(102,102,102, 0); } 


See listing ch09/rgba-3.html for the full code. 


HSL and HSLA 


You may have found yourself wanting a 
darker shade of a particular color as a 
contrasting element in one of your 
designs. This is easy to manage in simple 
cases with RGB—just make the num- 
bers smaller, as in the next example. 


For those of you reading this book on 
paper in black and white, the top pair of 
elements that follow are shades of gray, 
the middle pair are shades of blue, and 
the bottom pair are a sort of purple/pink 


combination: 


.one { 
background-color: 
rgb(204, 204,204); 
color: rgb(102,102,102); 
} 
-darkone { 
background-color: 
rgb(102,102,102); 
color: rgb(204, 204,204); 
} 
.two { 
background-color: rgb(51,102,153); 
color: rgb(17,34,51); 
} 
.darktwo { 
background-color: rgb(17,34,51); 
color: rgb(51,102,153); 
} 
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RGB( 204 , 204 , 204 ) 


RGB 102 , 102 , 102 ) 
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.three { 
background-color: rgb(232,44,122); 
color: rgb(83,9,40); 

} 

.darkthree { 
background-color: rgb(83,9,40); 
color: rgb(232,44,122); 


Although in all three pairs the second color is a darker shade of the first 
color, it gets increasingly difficult to see the relationship in the pairs as 
the numbers become less regular. 


NOTE THAT TO MAKE THE SAME COLOR DARKER, YOU HAVE TO ADJUST THREE 
VALUES. THE FACT THAT THESE PAIRS OF COLORS ARE RELATED PROBABLY 

WOULDN'T BE OBVIOUS IF YOU CAME ACROSS THEM ON DIFFERENT LINES OF А “~ < 
CSS FILE, UNLESS YOU'RE NATURALLY THE SORT OF PERSON WHO CAN'T LOOK AT A 
SET OF NUMBERS WITHOUT CALCULATING COMMON FACTORS IN YOUR HEAD. 


HSL stands for дие, saturation, and luminosity in the same way that RGB 
stands for red, green, and blue. The basic color is provided by the hue, 
and the saturation determines the intensity of the color —lower satura- 
tion means more grey. The luminosity determines how light or dark the 
color is. Here's the same set of colors using HSL notation: 


‚опе 1 
background-color: hs1(@, 0%, 80%) ; HSL( О, Oz, 807% ) 
color: hs1(0,0%, 40%) ; 
H о, о, 
аен HSLCO , O% , 40%) 


background-color: hs1l(0,0%, 40%) ; 
color: hs1(0,0%, 80%) ; | HSLCZIO , 50%, 40%) 
} 
.two { 
background-color: | нәс 210. 50%, 133%) | 
hs1(210, 50%, 40%) ; 
color: hs1(210,50%, 13.3%); | HSLLS35 80%, 54%) | 
} 
-darktwo { 
background-color: | sic 335. 807.181) | 
hs1(210, 50%, 13.3%); 
color: hsl(210,50%, 40%) ; 
} 
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.three { 
background-color: 
hs1(335, 80%, 54%) ; 
color: hs1(335, 80%, 18%); 
} 
.darkthree { 
background-color: 
hs1(335, 80%, 18%) ; 
color: hs1(335,80%, 54%) ; 
} 


In HSL, the luminosity of the color is controlled by one parameter. The 


relationship between the colors is therefore far more obvious from the 


code, because this is the only parameter that changes. 


Here’s what happens when you vary only 
the saturation. It’s hard to make out the 
differences in a black-and-white book, so 
I'll describe them: the box at the top is 
light blue, and the one at the bottom is 


5 гау. 


Ореп the example file to geta better look 
at the colors: ch09/colors-hsl-3.html. 


If only the hue is varied, you get different 
colors with the same saturation and lumi- 
nosity. The hue corresponds to a point on 
a color wheel, measured in degrees — 560 
and 0 are the same hue. Using four evenly 
spaced points for this example yields a 
blue, two shades of green, and a red. 


Unfortunately, because the colors have 
the same saturation and luminosity, they'll 
be even harder to tell apart in black and 
white. Open the example file to see for 
yourself: ch09/colors-hsl-4.html. 
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HSL has a semitransparent equivalent: HSLA. Like RGBA, it has a final 
parameter that specifies the percentage opacity: 


.one { 
background-color: 
hs1la(210,75%,40%,1); 
color: hs1(210,7526,13.390) ; 
} 
.two { 
background-color: 
hsla(210,75%,40%,0.66) ; 
color: hs1(210,75%,13.3%); 
} 
.three { 
background-color: 
hsla(210,75%,40%,0.33); 
color: hs1(210,75%,13.3%); 
} 
.four { 
background-color: 
hsla(210, 75%, 40%,0); 
color: hs1(210,75%,13.3%); 
} 


Сбб transforms 


Browser support quick check: 
2D transforms 


IE has been able to do transformations 


COLORS AND TRANSPARENCY CAN ADD DEPTH 
AND INTEREST TO YOUR DESIGNS, BUT 
EVERYTHING IS STILL BASICALLY A 
COLLECTION OF RECTANGLES. IF YOU WANT 
ELEMENTS AT AN ANGLE, OR TEXT THAT RUNS 
VERTICALLY, THEN WITH C552 YOU HAVE TO 
RESORT TO IMAGES. IN 
THE NEXT SECTION, 
YOU'LL LEARN ABOUT 
C953 TRANSFORMS. THEY 
LET YOU ROTATE, SKEW, NN 


Full Partial TRANSLATE, AND SCALE 
ELEMENTS TO CREATE AN 
INTERESTING VARIETY 
е : 7.0 IN YOUR DESIGNS. 
& - 3.5 In chapter 5, you learned about transforms 


using the «canvas» element and SVG —these let 
е : 9.0* you rotate, scale, and skew elements. Similar 
functionality is made available as part of 
О А 105 CSS3. Because everything uses the same ren- 
dering engine (the browser), this shouldn't be 
@ _ T too surprising. It’s already implemented — the 
browser is Just offering different ways to acti- 
vate it. Transforms allow your designs to 


with the nonstandard filter attribute escape the rectangular world of standard web 


since version 5.5. pages. 


www.it-ebooks.info 


324 


CHAPTER 9 Motion and color 


2D transforms 


To demonstrate CSS 2D transforms, we'll use this simple page with 
three similar elements: 


«body» 
<div>One</div> 
<div>Two</div> 
<div>Three</div> 

</body> 


Here’s the basic CSS: m wo | 
TWO THREE 
div 1 


display: inline-block; 
padding: lem; 
margin: lem; 
background-color: #666; 
color: #fff; 


This example picks out the second 
element and scales it to 150% of its 


initial size: 
div:nth-child(2) { 
transform: scale(1.5); 


nm 


ALL THE EXAMPLES IN THIS SECTION WILL NEED VENDOR PREFIXES APPLIED IF YOU 
WANT TO TRY THEM IN CURRENT BROWSERS. ADD —webkit-. -moz-, -o-, OR -ms- TO 
THE FRONT OF THE TRANSFORM PROPERTIES (NOT THE VALLIES) FOR SLIPPORT IN 
SAFARI/CHROME, FIREFOX, OPERA, AND ТЕЧ, RESPECTIVELY. SEE THE SECTION 
“BROWSER SUPPORT” AT THE END OF THIS CHAPTER FOR FURTHER DETAILS. 


By default, transformed elements 
keep their center point in the same 

place. If you scale the third element to ЕЗ TW THREE 
250% of its original size, it partially 
covers the second element: 


div:nth-child(3) { 
transform: scale(2.5); 
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The static point around which the 
transform is applied can be changed THREE 
with the transform-origin property. 


Here we set the third element to 
expand from its left outward: 
div:nth-child(3) { 


transform-origin: left; 
transform: scale(2.5); 


} 
You can also rotate elements: 
div:nth-child(1) { 

transform: rotate(16.5deg) ; 
} 


div:nth-child(2) { 
transform: rotate(33deg); 

} 

div:nth-child(3) { 
transform: rotate(66deg) ; 

} 


When the elements are rotated around their centers, the visual spacing 
can look a little odd. In this example, transform-origin is set for each 
element to bring the elements closer together: 


div:nth-child(1) div { 
transform-origin: bottom right; 
transform: rotate(16.5deg); 

} 

div:nth-child(2) div { 
transform-origin: top right; 
transform: rotate(33deg) ; 

} 

div:nth-child(3) div { 
transform-origin: top left; 
transform: rotate(66deg) ; 

} 
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In this screenshot, the original posi- 

tions of the elements have been 

drawn in so you can more easily see [^ | 
that each element is rotating around a 

different reference point. 


The skew functions allow you to create perspective-like effects. Hori- 


zontal skewing is achieved with skewx and vertical with skewv: 


div:nth-child(1) { 


transform: skewX(16.5deg); 
| u 
div:nth-child(2) { 


transform: skewY(33deg); 
} 
div:nth-child(3) { 
transform: 
skewX(16.5deg) skewY(33deg); 


It’s also possible to move elements around on the page with translatex 
and translate’: 


div:nth-child(1) { 


transform: translateX(50px); THREE 
| [oe 
div:nth-child(2) { 

transform: translateY(50px); 
} 
div:nth-child(3) { 

transform: 

translate(-50px, -50px); 

} 


NOTE THAT TRANSFORMING ELEMENTS DOESN'T AFFECT THE REST OF YOUR 
LAYOUT; EVERYTHING ELSE REMAINS IN THE PLACE IT WOULD BE IF THE THERE 
WAS NO TRANSFORM. TRANSFORMS CAN BE COMBINED TO CREATE INTERESTING 
EFFECTS. IN THE FOLLOWING EXAMPLE, THE THREE EXAMPLE ELEMENTS HAVE BEEN 
TRANSFORMED INTO A PSELIDO-3D CUBE USING SKEW, ROTATE, AND TRANSLATE. 
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For this trick, you need to add an 
extra <div> to the markup to pre- 
serve the direction of the content 
in the top face: 
<div class="cube"> 

<div> 

<div>One</div> 

</div> 

<div>Two</div> 

<div>Three</div> 
</div> 


The faces are then skewed by 30 
or -30 degrees and positioned so 
the edges line up. Colors are set 
on each face individually to 
enhance the perception of depth. 


See the blog post “3D Cube using 
2D CSS transformation” by Paul 
Hayes for a full explanation of 
this technique: www.paulrhayes 
.com/2009-04/3d-cube-using- 


css-transformations/. 


.cube div:nth-child(1) div, 

.Cube div:nth-child(2), 

.Cube div:nth-child(3) { 
padding: 10px; 
width: 180px; 
height: 180px; 

} 

.cube > div 1 
position: absolute; 

} 

.cube div:nth-child(2) { 
transform: skewY(30deg); 
background-color: #444; 

} 

.Cube div:nth-child(3) { 
transform: skewY(-30deg); 
background-color: 2666; 
left: 200px; 

} 

„сире div:nth-child(1) div { 
transform: 

skewY(-30deg) scaleY(1.16); 
background-color: #888; 
font-size: 0.862em; 

} 

.Cube div:nth-child(1) { 
transform: rotate(60deg); 
top: -158px; 
left: 100px; 
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Tricks with transform, translate, and skew are entertaining, but they 


aren't a 
example 


substitute for real three-dimensional transformations. The 
in the previous section is subtly off—it doesn’t represent a 


proper perspective rendering of a cube and the sides don’t quite line 


up. Fortunately, the CSS Working Group is working on a standard for 


transformations in three dimensions. 


Browser support quick check: 
3D transforms 


Full Partial 
е - 12.0* 
е е 10.0* 
eE- w 
ө |“ 


* Support for 3D transforms requires 


the presence of a compatible graphics 


card driver. 


This time, because you're making an actual cube in a 3D space, you 


need six elements to form the sides: 


<div clas 
<div 
<div 
<div 
<div 
<div 
<div 
</section 


The first 


s="cube"> 
class="one"><p>One</p></div> 
class="two"><p>Two</p></div> 
class="three"><p>Three</p></div> 
class="four"><p>Four</p></div> 
class="five"><p>Five</p></div> 
class="six"><p>Six</p></div> 

> 


step in 3D transformations is to set a perspective. This defines 


the depth of the 3D space within which you'll be positioning the trans- 


formed elements: 


body { pe 


rspective: 1000; } 
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Next, because you want all six sides of the cube to be transformed 
within the same 3D space, you set a transform-style value of preserve-3d 
on the parent element: 
div.cube { 

transform-style: preserve-3d; 

position: relative; 


} 


To start with, all six sides will be stacked on top of each other with 
absolute positioning: 


div.cube > div 
{ position: absolute; color: £fff; 
width: 200px; height: 200px; } 


Now the individual sides are transformed in 3D. Each side is rotated so 
it faces the correct way and then translated along the z-axis by 100 pix- 
els (because the sides of the cube are 200 pixels deep). The z-axis is the 
third dimension available in the 3D space. Because the rotation occurs 
before the translation, each side is pushed away from the center of the 
cube in a different direction: 


.one { 
transform: translateZ(100px); 
background: rgba(136,136,136,0.5); 


} 

.two { 
transform: rotateY(90deg) translateZ(100px); 
background: rgba(102,102,102,0.5); 

H 

.three { 
transform: rotateX(-180deg) translateZ(100px); 
background: rgba(68,68,68,0.5); 

H 

.four { 
transform: rotateY(-90deg) translateZ(100px) ; 
background: rgba(34,34,34,0.5); 

H 

.five 1 
transform: rotateX(90deg) translateZ(100px); 
background: rgba(153,153,153,0.5); 

} 
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.six 1 
transform: rotateX(-90deg) translateZ(100px) ; 
background: rgba(34,34,34,0.5); 

} 


Finally, the whole cube is rotated in the 2- апа x-axes for artistic effect: 


div.cube { 
transform: rotateZ(-45deg) rotateX(45deg); 


ge 9 


=< 
ЄЎ 
е 


| WRAPPING YOUR WEB PAGE AROUND A CUBE WILL CERTAINLY BE 
Si MEMORABLE FOR VISITORS, BUT BE CAREFUL THAT YOU DON'T LET YOUR 
SNAZZY CSS GET IN THE WAY OF THEM ACCESSING YOUR CONTENT. 


2 


USER FRIENDLY by J.D. "Illiad" Frazer 


OK, NOW I'M STARTING TO 
FEEL NALISEATED. HOW DO I 
TURN IT OFF? 


CHECK IT OUT? INE USED 
6553 TO PUT EACH PAGE OF 
OUR WEBSITE ON THE FACE 
OF A SPINNING CUBE 


COPTRIGNT 02008 2.0, Miad" Prazer MITP://WWW.USERIRIONOLTORG/ 


/ TRANSFORMS COME INTO THEIR OWN WHEN COMBINED WITH 
gh ш ANOTHER NEW CSS3 FEATURE: TRANSITIONS. YOU'LL LEARN 
ABOUT TRANSITIONS IN THE NEXT SECTION. 


C99 transitions 


A transition is a short animation between two element states, such as 
activating a drop-down menu or closing a pop-up message. Instead of 
having the elements immediately appear or disappear, the menu might 
slide down, and the pop-up message could fade out. Such effects 
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improve usability by making interfaces more realistic and can be used 
to clarify relationships. 


ONE OF THE KEY ATTRACTIONS OF THE JQUERY JAVASCRIPT LIBRARY FOR 

DESIGNERS IS THAT IT MAKES IT EASY TO CREATE THESE SMALL ANIMATIONS. CSS 
TRANSITIONS ARE INTENDED TO REMOVE THE NEED FOR JAVASCRIPT TO APPLY NS 

SMALL VISUAL EFFECTS, AND IN THIS SECTION YOU'LL LEARN ALL ABOUT THEM. 


K 
l i 
One simple way e apply transitions 1S Full Partial 
with a dynamic pseudo-class like 
:hover. In the following sets of screen- E е В 7.0 
{ o 
shots, three of the transformation E 
examples from the previous section © g & - 40 
have been applied to the :hover state 5= 
а. s ER t 
ofa containing <div> with a transition 95 ea _ 10.0 
lasting 10 seconds. Instead of flipping 20 
from one state to the other, the change go О _ 10.5 
happens gradually. If you look care- E 
: m 
fully, the | fly-like speck on each @ _ se 
screenshot is the mouse pointer. 


This example is from ch09/transforms-5.html with a 10-second 


transition. 


SUN 23 JAN ZON1G0933 GMT , SUN 23 JAN 201 160936 GMT SUN 23 JAN 201160942 GMT 


Bem oe по 


This example is from ch09/transforms-6.html with a 10-second 


transition. 


SUN 23 JAN 201 162238 GMT * SUN 23 JAN 201162241 GMT SUN 23 JAN 201 162247 GMT 


ЕЗ Е ЕЗ гїї © 
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This example is from ch09/transforms-7.html with a 10-second 


transition: 


SUN 23 JAN 201 163125 GMT ^ SUN 23 JAN 2011 163129 GMT SUN 23 JAN 201 163134 GMT 
, [wo 


The transition-duration property ^ div:hover div:nth-child(1) { 
transform-origin: bottom right; 


is the only thing required to cre- 
transform: rotate(16.5deg); 


ate the animation: } 
div div { div:hover div:nth-child(2) { 
transition-duration: 10s; transform-origin: top right; 

} transform: rotate(33deg); 

H 
Although all three elements have —— div:hover div:nth-child(3) { 
unique states when the parent transform-origin: top left; 
element is hover, all three are transform: rotate(66deg); 


transitioned according to the pre- 
vious rule. Look at ch09/transi- 
tions-l.html to see for yourself. 


When transition-duration is set on the default state of the element (in 
this case, when it isn't hover), the same duration applies as the transi- 
tion runs both forward and backward —as the element enters the hover 
state and leaves it, the transition will last 10 seconds as shown in the 
results of listing ch09/transitions-3.html. 


TUE 12 JUL ZON 202944 BST TUE 12 JUL ZON 202949 BST TUE 12 JUL ZON 2О24:56 BST 
' 
+ 
+ 
TWO * 
r ^ А 
1 
1 
. 
TUE 12 JUL 201 20:30:10 BST TUE 12 JUL 201 20:30:05 BST TUE 12 JUL 201 20:30:02 BST + 


Q 
a 
TWO 
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But you can put transition-duration on the hover state. In this case, it 
will only apply as the element enters the hover state. When the element 


leaves hover, it immediately snaps back to the starting position—a 
duration of zero. 


WED O6 APR 201 225429 BST WED O6 APR 2011 2254:37 BST WED Об APR 201 225443 BST 
THREE » h 
[es] [E es : 
D 
* 
L] 
LI 
WED Об APR 201 225448 BST ^ 


* 
4" 
Е Ed 


This is the critical bit of code from listing ch09/transitions-4.html: 
div:hover div { transition-duration: 10s; } 


You can also put transition-duration on both states. In the next exam- 


ple, the transition lasts 10 seconds as it enters the hover state and 5 sec- 
onds as it exits. 


WED Об APR 201l 225520 BST WED Об APR 201 225526 BST WED Об APR 201 225533 BST 


THREE " 
[mo 


WED Об APR 2Ої! 225539 BST 


+ 
*""--* 


WED Об APR 201 225543 BST 
* 
4A" 
TWO THREE 
[wo | 


The duration for exiting the hover state is specified on the rule without 
the :hover: 


div div ( transition-duration: 5s; } 
div:hover div { transition-duration: 10s; } 


See the complete example in listing ch09/transitions-5.html. 
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Transition timing functions 


By default, transitions happen at a constant rate, but you can adjust 
that with the transition-timing-function property. The default value is 
linear, but several other keywords are available: ease-in-out, ease-in, 
ease-out, and ease. The difference is much easier to see than it is to 
explain, so the next four screenshots show the values in operation side 
by side over a 20-second transition. 


The quickest out of the blocks is ease-out, followed by ease. Both ease- 
in-out and ease-in are initially slower-moving than linear. 


SUN 10 APR 201 1:45:01 BST 
а LEN оа е еа Сте ЖҮ ьс ай ЕЕЕ I 
[] к= LE | 1р Foy I 
ı LINEAR 1 4 EASE-IN-OUT | , EASE-IN ı ү EASE-OUT | , EASE 1 
I I l I l I l 11 L| 
[| bod 1р | 1р L| 
[| bod 1р bod 1р L| 
I 1р ‚МЕ bod 1р I 
1 йе LES | I l I l L| 
I bod 1р Fo d 1р I 
I bod Fog 9 | 1р L| 
І ба ба ба ба ' 
L| bod LN | кй 1р L| 
L| гт гр od 1р I 
I гт 11 od I l I 
І ба ба ба ба ' 
1 ба ба ба ба І 
I Floyd I d | 1р I 
EEEE J 1------ E E ЕЕЕ x di у= ее "rii n 4 
A few seconds later, ease has overtaken ease-out. 
SUN 10 APR 201 1:45:04 BST 

mm Жоанн ae Pe aa Po 

LINEAR EASE-IN-OUT EASE-IN EASE-OUT EASE 


www.it-ebooks.info 


335 


CSS transitions 


As you go past the halfway point, ease-in-out has accelerated and is 
Toward the end of the transition, ease-in is starting to catch up with 
the rest; remember, all five transitions take 20 seconds to complete. 

The non-linear transition timings often appear more natural —things 
tend to accelerate and decelerate rather than suddenly start and stop 


SUN 10 APR 201 1145:Oqd BST 
SUN 10 APR 201 1:45:15 BST 


ahead of linear. 
moving. 
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You're also not limited to effects on hover; any other dynamic pseudo- 
class will work just as well. With a slight modification, the :target 
example from chapter 7 can be made to fade smoothly in and out. 


FRI O8 APR 201 224601 BST FRI O8 APR 201 224609 BST FRI O8 APR 2ОП 224615 BST 


тонож SHOW TWO SHOW THRE SHOW FOUR FOU SHOW TWO SHOW THREE. SHOW FOUR SPON ONE SAO TWO SHOW TEE SHOW OUR 


1. The page loads blank. 2. When you click the 3. After 10 seconds, the 
first link, the content transition completes. 
starts to fade in. 


FRI O8 APR 2Ої 224624 BST FRI O8 APR 201 224629 BST FRI O8 APR 201 224634 BST 


POW OME SHOW TWO HOW TINE эон SHOW ONE SPON TWO. BOW TREE SHOW FOUR SHOW OM, SHOW TWO SHOW TIRE SHOW FOUR 


аазам 


4. Clicking the second 5. ...as the new page 6. After 10 seconds, the 
link starts two transi- starts to fade in. new content has 

tions. The current text replaced the old. 

starts to fade out... 


The HTML is similar to that in chapter 7. All that’s been added is a 
<section> element to allow the paragraphs to be absolutely positioned: 


<menu> 
<a href="#one">Show one</a> 
<a href="#two">Show two</a> 
<a href="#three">Show three</a> 
<a href="#four">Show four</a> 
</menu> 
<section> 
<p id="one">I never am really satisfied. ..</p> 
<p id="two">In almost every computation. ..</p> 
<p id="three">Many persons who are not conversant. ..</p> 
<p id="four">The Analytical Engine has no pretensions...«/p» 
</section> 
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The paragraphs then fade in and out over 10 seconds. The fade-in uses 
the timing function ease-in (start slow and finish fast), and the fade-out 
uses ease-out so the disappearing paragraph begins to fade out as 
quickly as possible, giving immediate feedback to the user: 


section { position: relative; } 


рї 
opacity: 0; 
position: absolute; 
transition-duration: 10s; 
transition-timing-function: ease-out; 
} 
p:target { 
opacity: 1; 
transition-timing-function: ease-in; 
} 


See the full source code in ch09/transitions-6.html. 


Transition property 
So far, the examples have implicitly chosen which properties they will 
apply to by only listing the changed ones in the transition state. Every 
property has therefore been subject to the same duration and timing 
function. But it’s possible to apply multiple transitions to the same ele- 
ment, with each one affecting a different property. 


In this section, you'll take advantage of the fact that all the transition 
properties accept multiple properties in a comma-separated list. You 
can declare two transition durations, one of 10 seconds and one of 20, 


like this: 

transition-duration: 10s, 20s; 

Then, if you declare transition-property like this 
transition-property: top, transform; 


the transition of the top property will take 10 seconds, and the transi- 
tion of the transform property will take 20 seconds. The next example 
compares two elements with the same transition duration but different 
transition properties. 
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SUN 10 JUL ZON 1:37:02 BST SUN 10 JUL 201 1:37:07 BST 


[es] [es] 
g“ 


SUN 10 JUL ZON 1:37:03 BST 


SUN 10 JUL 20ù 13724 BST SUN 10 JUL 20ù 13715 BST SUN 10 JUL 20ù 13712 BST 


LJ 
TWO 
sspe [ex [em 


As you can see, element one drops quickly and expands slowly, 
whereas element two expands quickly and drops slowly. The markup is 
two <div> elements inside a «section» with this CSS applied to it: 


section div { 
position: absolute; 
top: Opx; 
transition-duration: 10s, 20s; 
transition-property: top, transform; 


} 
section div:nth-child(2) { 
left: 200px; 
transition-property: transform, top; 
} 
section:hover div { 
top: 280px; 
transform: scale(1.5); 
} 


Transition delay 


You don’t have to start a transition immediately after whatever action 
initiated it. The transition-delay property allows you to specify a wait 
before a transition starts. In the following screenshots, element two 
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doesn’t begin transitioning until five seconds after element one started, 
and element three’s transition begins a further five seconds after that. 


THU 21 JUL ZON 223213 BST THU 21 JUL 201 223217 BST THU 21 JUL ZON 223220 BST 
LI LI 
h 
THREE M 
* 
* 
LI 
THU 21 JUL ZON 223231 BST THU 21 JUL 201 223227 BST THU 21 JUL ZON 223223 BST Н 
LJ 
n 


* 


р 7 
THREE "d 
ЕЗ т ЕЗ ЕЗ TW ЕЗ ЕЗ 14 


The code, from listing ch09/transition-delay-1.html, is identical to that 
from ch09/transitions-3.html except for these two rules: 


div div:nth-child(2) { transition-delay: 5s; } 
div div:nth-child(3) { transition-delay: 10s; } 


The most common use for transition-delay is to chain a number of 
transitions together. If you want an element to first move and then 
enlarge, you specify two transitions like this: 
div { 

transition-duration: 10s, 10s; 

transition-delay: 0, 10s; 

transition-property: top, transform; 


j 


The element will first transition the top value and then transition the 
transform. You can see a full example in the code file ch09/transition- 
delay-2.html. With transition-delay, it's possible to create multiple-step 
animations, providing that at each step a different property is transi- 
tioned. For a more complete approach to animation with CSS, see the 
later section "CSS Animation." 


Triggering transitions with JavaScript 


After a transition is defined on an element, any change in the computed 
style will trigger the animation. This doesn't have to be due to a 
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dynamic pseudo-class taking effect; you can also change the styles with 


JavaScript. 
SAT OF АРК 201 233222 BST SAT ОЯ APR 2О!! 233228 BST 
Change left | | Change top | | Change color | | Reset Change left | | Change top | | Change color | { Reset 


Clicking the Change Left but- Over 10 seconds, the element moves 


ton starts an animation. to the left. 
SAT OF APR 2011 22:32:33 BST SAT OF APR 2Ої! 233236 BST 
Change left Change top | | Change color ) | Reset Change left Change top Change color | Reset 
ANIMATE ME 


Similarly, clicking Change Top Over 10 seconds, the element moves 
starts another animation. down from the top of the page. 


Here’s the HTML for the page: 


<menu> 
«button onclick="clickme('changeleft')">Change left</button> 
«button onclick="clickme('changetop')">Change top</button> 
«button onclick="clickme('changecolor')">Change color</button> 
«button onclick="reset()">Reset</button> 

</menu> 

<div id="animateme">Animate Me</div> 
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The CSS defines the animation and three classes that adjust the rele- 
vant properties: 
#animateme { 


background-color: #666; 
position: absolute; 


color: #fff; 
left: 100px; 
top: 100px; 


transition-duration: 10s; 


} 

.changeleft { left: 250px !important; } 

.changetop { top: 300px !important; } 

.changecolor { background-color: #ff00ff !important; } 


Note that you must use ! important because otherwise the ID selector 
would take precedence. Finally, here’s the JavaScript function to 
apply the styles to the element when the buttons are clicked: 


function clickme(classname) { 
var el - document.getElementById('animateme'); 
el.className += " " + classname; 


} 


And here’s a reset function to clear the styles: 


function reset() { 
var el = document.getElementById('animateme'); 
el.setAttribute("style",""); 


IF YOU KNOW EXACTLY WHERE THE ELEMENT NEEDS TO GO, THEN ADDING PREDEFINED 
CLASSES IS FINE, BUT IF YOU WANT TO ANIMATE AN ELEMENT BASED ON THE RESULT 
OF A CALCULATION OR USER INPUT, YOU CAN SET THE STYLE PROPERTIES OF THE NS 
ELEMENT DIRECTLY. THE NEXT EXAMPLE DEMONSTRATES THIS APPROACH. V 


1 | 


This example switches to Opera so you can take advantage of the color 
input type. 


Click Me || Reset | LEFT: 100 2 TOP: 100 2 COLOR: GREEN 


x 
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SUNDAY APRIL 10, 00:32:46 GMT*OIOO 201 
Ck кее CET тою COLOR EEEEBI 
L 


ANIMATE ME 


Set the left and top 
to 200 and the color 
to a light blue. 


SUNDAY APRIL 10. 00:34:06 GMT*OIOO 20 


Cy ке ыт TOP s 7 COLOR MENNN 


ANIMATE ME 


Set the left to 0, the 
top to 500, and the 


color to black. 


«menu» 


Motion and color 


SUNDAY APRIL 10, ОО:33:35 GMT*OIOO 20! 


Gags) Reet) LEFT: тол сосе 


The element ani- 
mates over 10 sec- 
onds as before. 


SUNDAY APRIL 10, 00:3414 GMT*OIOO 2011 


GER e hen EFT: TO COLOR тшше 


The element ani- 
mates from its cur- 
rent position. 


SUNDAY APRIL 10, OO:33:4O GMT*OIOO 20: 


Cage) ке CEPT: TOP COLOR M 


The animation is 
complete. 


SUNDAY APRIL 10, OO:34-3 GMT*OIOO 2011 


саш) кен EFT: Tor ——€ 


ANIMATE ME 


After 10 seconds, the 
new properties are 
in effect. 


«button onclick="clickme()">Click Me</button> 
«button onclick="reset()">Reset</button> 
«label for="myleft">Left</label>: 
<input id="myleft" type="number" value="100"> 
«label for="mytop">top</label>: 
<input id="mytop" type="number" value="100"> 
«label for="mycolor">color</label>: 
<input id="mycolor" type="color" value="#666666"> 


</menu> 


<div id="animateme">Animate Me</div> 


function clickme() { 


var el = document.getElementById('animateme'); 


var left = 
var top - 
var color - 


document.getElementById('myleft').value; 
document.getElementById('mytop').value; 
document.getElementById('mycolor').value; 


el.setAttribute("style","left: " + left + "px; top: " + top + 


" 


px; background-color: 


Ш 
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SOMETIMES YOU MAY WANT MORE THAN THE SIMPLE LINEAR MOVEMENT 
BETWEEN A SET OF PROPERTIES THAT A TRANSITION ALLOWS. FOR EXAMPLE, 
YOU MAY WANT AN ELEMENT TO BOUNCE OR CYCLE THROUGH SEVERAL STATES. NN 
THE NEXT SECTION SHOWS YOU HOW TO CREATE THESE KINDS OF ANIMAT IONS. 


C99 Animation 


CSS Animations are a way of chaining 


. A" Full Partial 
multiple transitions together on the 
same property to be performed one 3 е 4.0 
after the other. Transitions are always 3 
linear —a single transition can move an M 2 & _ 50 
element from one location to another, BS 
but it can’t move it to a third location EE e iô 
after that. Although you can chain ЕРА 
transitions together using transition- 5° О _ 1 
delay, this technique quickly becomes $ 
unwieldy for more than a few steps, = _ m 
and you can still transition only one Ө | 


property at a time. You could, of 
course, perform a whole sequence of transitions with JavaScript, but 
that would defeat the purpose of transitions —a declarative solution for 


simple animations. 


This first example makes an element bounce up and down. 
SUN fO JUL 201 15:54:34 BST SUN TO JUL 201 15:54:38 BST SUN 10 JUL 201 15:54:42 BST 


ANIMATE ME 


ANIMATE ME 


ANIMATE ME 


To declare an animation, use the @keyframes directive. The first word 
after the directive is the name of the animation, followed by a list of 
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keyframes in braces. Keyframes are defined by the keywords from or 


to,ora percentage value: 


@keyframes bounce { 
from { top: 50px; } 
25% { top: 350px; } 
50% { top: 50px; } 
75% { top: 350px; } 
to { top: 50px; } 

} 


For each keyframe, you provide a semicolon-separated list of CSS 
properties, just as in a normal CSS rule. For best effect, these should be 
properties that can be transitioned; then the browser can take care of 
the intermediate animation. The previous keyframes set the top of the 
element to be alternately 50 and then 350 pixels. 


To apply the animation to an element, use the animation-name property: 


#animateme { 
position: absolute; 
left: 100px; 
top: 50px; 
animation-duration: 20s; 
animation-name: bounce; 
animation-iteration-count: infinite; 


j 


This rule also sets an animation-duration—this works the same way as 
transition-duration. The animation will run for 20 seconds, so you can 
calculate that the element will have a value of 350 pixels for top after 5 
seconds: there are four steps after the fron state, and 5 is 25% of 20 sec- 
onds. You can also specify animation-iteration-count — this can be a fixed 
value such as 3 Or, as here, infinite, so the element can bounce up and 
down forever (or until you get annoyed enough by the bouncing that you 
close the tab). See the full source code in ch09/animations- 1 .html. 


In the next example, two properties are animated simultaneously —the 
element still bounces up and down, but it also gets bigger as it reaches 
the bottom of the bounce. 
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SUN 10 JUL 201 15:55:02 BST SUN 10 JUL 201 155505 BST SUN1O JUL 201155508 BST 


ANIMATE ME 


As mentioned earlier, a keyframe is just like a regular CSS rule: you 
can list as many properties as you need (although like transitions, not 
all properties are animatable). For this example, all that’s been added 
to the previous one is a scale transform; see the full source code in 
ch09/animations-2.html: 


Gkeyframes bounce { 
from { top: 50px; transform: scale(1); } 
350px; transform: scale(1.25); } 
50px; transform: scale(1); } 
350px; transform: scale(1.25); } 
50px; transform: scale(1); } 


j 


2596 ( top: 
50% ( top: 
7596 { top: 
to { top: 


Just like transitions, multiple animations can be applied simultane- 
ously. Next, you see the element doing the same up-and-down bounce 
animation as before, but now it's also sliding left to right. 


SUN TO JUL 201155545 BST 


SUN TO JUL 201155602 BST 


SUN TO JUL 201155549 BST 


SUN IO JUL 201155559 BST 
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ALL WORKS; HOW MLICH OF IT : = 
ANO UCE REIT NON ch09/animations-3.html. 


YOU'LL LEARN ABOUT BROWSER 
SUPPORT IN THE NEXT 
SECTION. 


Browser support 


© eco @ 

12 14 4 6 8 |9 |10 | 11.1 | 11.5 5 5.1 
Opacity ° ° ° ° o ° ° ° ° ° ° 
КСВА ° ° ° ° ° ° ° ° ° ° 
HSL/HSLA е е е e ° ° ° ° ° ° 
2D transforms o o o o o o o o o o 
3D transforms o о о о o 
Transitions o o о о о o o o o o 
Animation o o o o o o 
Key: 


e Complete or nearly complete support 
o Incomplete or alternative support 
Little or no support 
Opacity in IE8 and earlier 
Although IE8 doesn’t support the CSS3 opacity property, it does sup- 
port setting opacity through its nonstandard filter mechanism: 


-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity-50)"; 


This CSS will make the element it's applied to have an opacity value 
of 0.5. 


Transforms, transitions, and animations in current browsers 


Allcurrentbrowsersthathave support fortransforms, transitions, andani- 
mations require a vendor prefix to make things work. For transforms and 
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transitions, this is the normal level of pain for using experimental CSS — 
each property has to be listed five times. Here'sasection of code from ch09/ 
transition-delay-2.html: 


-moz-transition-duration: 10s, 10s; 
-webkit-transition-duration: 10s, 10s; 
-o-transition-duration: 10s, 10s; 
-ms-transition-duration: 10s, 10s; 
transition-duration: 10s, 10s; 
-moz-transition-delay: 05, 10s; 
-webkit-transition-delay: 0, 10s; 
-o-transition-delay: 0, 10s; 
-ms-transition-delay: 0, 10s; 
transition-delay: 0, 10s; 
-moz-transition-property: top, -moz-transform; 
-webkit-transition-property: top, -webkit-transform; 
-o-transition-property: top, -o-transform; 
-ms-transition-property: top, -ms-transform; 
transition-property: top, transform; 


For animations, it's more of a pain. Even if you're only animating stan- 
dard properties, you must specify the keyframes for every browser you 
want to target, not including the standard declaration: 


Q-moz-keyframes bounce { 
from { top: 50px; } 
25% { top: 350px; } 
50% { top: 50px; } 
75% { top: 350px; } 
to { top: 50px; } 

} 

@-webkit-keyframes bounce { 
from { top: 50px; } 
25% { top: 350px; } 
50% { top: 50px; } 
75% { top: 350px; } 
to { top: 50px; } 

} 

@-o-keyframes bounce { 
from { top: 50px; } 
25% { top: 350px; } 
50% { top: 50px; } 
75% { top: 350px; } 
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to { top: 50px; } 

} 

Q-ms-keyframes bounce { 
from { top: 50px; } 
25% { top: 350px; } 
50% { top: 50px; } 
75% { top: 350px; } 
to { top: 50px; } 

} 


Then the element itself needs all the animation-* properties for each 
browser: 


#animateme { 
-moz-animation-duration: 20s; 
-moz-animation-name: bounce; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-duration: 20s; 
-webkit-animation-name: bounce; 
-webkit-animation-iteration-count: infinite; 
-o-animation-duration: 20s; 
-o-animation-name: bounce; 
-o-animation-iteration-count: infinite; 
-ms-animation-duration: 20s; 
-ms-animation-name: bounce; 
-ms-animation-iteration-count: infinite; 


j 


Of course, you should add the standard properties to this listing as 
well. This will get really fun when the animation properties are stan- 
dardized, but you want to use them to animate prefixed properties. For 
example, it's not yet clear if gradients and animations will be standard- 
ized at the same time (or even if gradients will be animatable) but if 
animations get standardized first in browsers, you could end up writing 


code like this: 


Gkeyframes swipe { 
from { 
-moz-linear-gradient(to right, #fff, #f00) 
webkit-linear-gradient(left, #fff, #f00) 
-o-linear-gradient(to right, #fff, #f00) 
-ms-linear-gradient(to right, #fff, #f00) 
-linear-gradient(to right, #fff, #f00) 
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} 
50% { 
-moz-linear-gradient(to right, #f00, #fff, #f00) 
webkit-linear-gradient(left, #f00, #fff, #f00) 
-o-linear-gradient(to right, #f00, #fff, #f00) 
-ms-linear-gradient(to right, #f00, #fff, #f00) 
-linear-gradient(to right, #f00, #fff, #f00) 
} 
to { 
-moz-linear-gradient(to right, #f00, #fff) 
webkit-linear-gradient(left, #f00, #fff) 
-o-linear-gradient(to right, #f00, #fff) 
-ms-linear-gradient(to right, #f00, #fff) 
-linear-gradient(to right, #f00, #fff) 
} 


PANICKING JUST YET. IT'S TO ILLUSTRATE THAT ANIMATIONS 


THIS IS A POSSIBLE WORST -CASE SCENARIO; NO NEED TO START 
NECESSARILY MLILTIPLY THE BROWSER PREFIX PROBLEM. NS 9, 
SA 


l | 


Using modernizr.js and jQuery for animation in older browsers 
CSS Animations are intended to replace those implemented in libraries 
like jQuery. Using modernizr.js, it’s easy to detect whether a browser 
supports CSS Animations and, if it doesn’t, to supply equivalent 
jQuery animations instead. The following code is taken from ch09/ 
animations-modernizr.html; it’s based on the earlier example ch09/ 
animations-l.html: 


function bounce(el) { TET 
$(el).animate({top: '350px'), 5000) JQUERY EQUIVALENT 


.animate({top: '50px'}, 5000) TO BOUNCE 
.animate({top: '350px'}, 5000) 
.animate({top: '50px'}, 5000); 
} 
i TRUE IF ANIMATION 
$ (document) . ready ( functionO 1 IS SUPPORTED 
if(!Modernizr.cssanimations) { "di 


var refreshId; 
$CfunctionO { 
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$C'#wrapper').hover(function() { a HOVERO EQUIVALENT 
bounce($('#animateme')) ; TO HOVER 


refreshId = setInterval(function( { 
bounce($('#animateme')) }, 20000); 
3}, functionO(t 
clearInterval(refreshId); 
$C'Zanimateme').stop(true,false) 
-animate({top: '50рх'}, 500); 


Summary 
You're now fully prepared to produce Web 2.0-style designs with lay- 


ers of semitransparent elements thanks to opacity and rgbaO. You're 
also fully equipped to create sets of complementary colors in your head 
thanks to һ510) and hslaQ. Transforms and transitions create lots of 
possibilities for making user interfaces smoother and more profes- 
sional. 


IN THE NEXT CHAPTER, YOU'LL LEARN ABOUT EVEN MORE CSS3 EYE CANDY. WE'LL 
P COVER THE NEW FEATURES IN CSS3 FOR BACKGROUNDS AND BORDERS, 
INCLUDING THE EXTREMELY POPLILAR ROLINDED CORNERS AND DROP SHADOWS. 
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Borders and backgrounds 
with C5953 


This chapter covers 


* Adding drop shadows and rounded corners 
* New ways to apply and use background images 


• Creating gradients with CSS 


MY STYLE 


351 
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CSS3 makes the traditional background image approaches more flexi- 
ble and provides declarative options for drop shadows, rounded cor- 
ners, and gradients. Solutions that have involved images, JavaScript, 
and extra markup can be replaced with simple HTML and CSS. 


Drop shadows with C593 


The pseudo-3D effect provided by drop shadows is a popular design 
approach. In the past, designers have gone to great lengths to add this 
visual effect, but CSS3 saves a lot of time and resources by having the 
functionality built in. 


CSS3 defines two types of shadow: box and text. They use a similar 
syntax: 


text-shadow: rgb(0,0,0) 3px 3px 3px; 
box-shadow: rgb(0,0,0) 3px 3px 3px; 


A basic shadow, in either case, is defined by four values: 


«color» <offset-x> «offset-y» «blur-radius» 


THE NEXT SECTION LOOKS AT WHAT EACH OF THE 
"^ FOUR VALUES USED TO DEFINE A SHADOW DOES. 


Box shadows 


color is any valid offset-xis a CSS 
CSS color value, such length, such as 3px 
as #6699cc, or 0.5em. Negative 
rgb(102,153,204), or values are allowed. 
rgba(102,153,204,255). 


blur-radius is also 
a CSS length. Nega- 
tive values aren't 
allowed, but this 
value is optional. 


offset-y is also a 
CSS length; negative 
values are allowed. 
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E Standard Prefixed 
o 

o 

2 

5 е 10.0 5.0 
х 

o 

de) 

© е 40 3.5 
= 

о 

$ 

с 

t 

o 

2 

E О 10.5 ғ 
[7] 

© 

= 

= Ө 5.0 3.0 
a 


SIMPLE BOX SHADOWS 


Without the optional blur-radius, a box 


shadow isn’t much different from a border. 


Here’s an example that only sets an 


offset-x: 


box-shadow: 
rgb(0,0,0) 12px Өрх; 


And heres a plain offset-y: 


box-shadow: 
rgb(0,0,0) Opx 12px; 


Adding a blur-radius by itself creates a 


more shadow-like effect, even without any 


offsets: 


box-shadow: 
rgb(0,0,0) Opx Opx 12px; 
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By combining the blur-radius with the off- 
sets, you can set the apparent light source: 


box-shadow: 
rgb(0,0,0) Opx 12px 12px; 


COMPLEX BOX SHADOWS 


For complex effects, you can add multiple shadows in a comma- 
separated list; they can all use different colors and directions. The fol- 
lowing example has a red/orange shadow down and to the right and a 
purple shadow up and to the left. Whether this is a good idea is up to 
you! 


PSYCHEDELIC! 


box-shadow:rgb(255,0,0) 3px 3px 3px, 
rgb(255,102,0) 6px 6px 6px, 
rgb(255,204,0) 9px 9px 9px, 


rgb(255,0,204) -3px -3px 6px; 


The full box-shadow definition includes two additional, optional 


elements: 


«inset» «color» «offset-x» «offset-y» «blur-radius» <spread-radius> 


inset, if present, E spread-radius is a 
puts the shadow [ CSS length; it causes 
inside the element | the shadow to grow 
instead of (positive values) or 
outside. shrink (negative 
values) relative to the 
SPREAD-RAD. size of the element. 
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Here the shadow grows by 
six pixels on every side: 
box-shadow: rgb(0,0,0) 

Opx Opx 12px 6px; 
This creates a shadow that 
extends evenly all around 
the element. 


This example shows a 
spread-radius combined with 
an offset-y: 


box-shadow: rgb(0,0,0) 
Opx 12px 12px 12px; 


Using inset, you can achieve 


bevel-like effects: 


box-shadow: inset rgb(0,0,0) 
Opx Өрх 12px 6px; 


PLEASE! 


NOT TO BE 
PRESSINK 
BUTTON! 


Or you can make an element 
appear to drop into the page, 
in this case by using the 
:hover pseudo-class: 


div:hover { 
box-shadow: 
inset rgb(0,0,0) 
3px 3px 5px; 

} 
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Text shadows 


Text shadows work exactly the same as box shadows. They're defined 
by the same four values: 


«color» «offset-x» «offset-y» «blur-radius» 


Sundard Prefixed We won a look at these values again; 
instead, let’s look at some examples. 

E е 4.0 Е 
о 
Ф 
is 
о 
Sz е 3.5 - 
Ss 
tu 
SUE. * 
не - | » 
20 
av 
© 
o = 
О 10.0 
2 
@ 

Ө 2.0 - 


* ТЕ can create text-shadow effects using its 
proprietary filter property, but only on 
elements that have a transparent back- 
ground. 


Here’sasimple offset-x: —— 1 17777000007 
text-shadow: 
rgb(51,51,51) 6px Opx; 


And here's an offset-y: 


text-shadow: 
rgb(51,51,51) Opx 6px; 


ә 


As with box shadows, things : : 
become more interesting when you : Text Shadow : 


invoke blur-radius: 


text-shadow: 
rgb(51,51,51) Opx Opx 6px; 
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And combining that with an offset 
can create a 3D feel to match your 
box shadows: 


text-shadow: 
rgb(51,51,51) Opx 6px 6px; 


Multiple shadows work as well: 


text-shadow: 
rgb(51,0,0) 6px Opx, 
rgb(0,0,51) Өрх 6px; 


But be careful, because it's easy to 
create completely unreadable text: 
text-shadow: 
rgb(51,0,0) 6px Opx 3px, 
rgb(0,0,51) Өрх 6px 3px; 
In most cases, you'll want to keep 
your text shadows small and 
subtle. 


You can use negative values for 
offset-x and offset-y. Doing so 
allows for some interesting 
pseudo-3D effects if you set the 
text color to be the same as the 
background color: 

color: rgb(255,255,255); 


text-shadow: 
rgb(51,51,51) -1px -1px; 


AFTER DROP SHADOWS, THE EFFECT MOST BELOVED OF GRAPHIC DESIGNERS 
IN THE LAST DECADE IS ROUNDED CORNERS. FOR A LONG TIME WEB 
AUTHORS HAVE BEEN USING A NUMBER OF APPROACHES (OR HACKS) ТО NS 
CREATE BOXES WITH ROUNDED CORNERS. THEY'RE SLICH A LISEFLIL EFFECT 
THAT CSS3 PROVIDES A WAY TO MAKE THEM WITHOUT ANY OF THESE HACKS. 


Drop shadows with С555 357 


2 
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Easy rounded corners 


OY 


Perhaps even more common than the drop shadow in modern web 


design is the rounded corner. Even otherwise simple website designs 


often use rounded corners for visual effect. 


THE LENGTHS WEB AUTHORS HAVE TO GO TO GET THE ROUNDED CORNER 
LOOK IN CSSZ IS EXTRAORDINARY—ONE POPULAR METHOD INVOLVES 
ADDING HUNDREDS OF ELEMENTS TO A PAGE JUST TO GET ROUNDED 
CORNERS ON A SINGLE ELEMENT; WE'LL LOOK AT THAT IN THIS SECTION. 


Browser support quick check: 
border-radius 


ecoe 


Standard 


7.0 


4.0 


9.0 


10.5 


5.0 


Prefixed 


5.0 


3.5 


3.0 


Many of the rounded corners you see on the 
web aren't strictly necessary. An engineer 
at Yahoo! once created a version of the 
company's home page without any rounded 
corners and discovered that it reduced the 
amount of data a user had to download by 
more than 5096. When he showed the two 
different versions of the page to designers, 


they didn't spot the difference. 
CurvyCorners is a JavaScript library for 


creating rounded corners on elements. Let's 
see how it compares to the new CSS3 tech- 
niques for creating rounded corners. 


OK IM GOING 


TO CREATE AN ELEMENT 
WITH ROUNDED CORNERS MEANWHILE, 

USING THE CURVY T'LL CREATE AN 
CORNERS JAVASCRIPT IDENTICAL-LOOKING 
LIBRARY. ELEMENT USING ~ 


CSS3. 
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Border radius 


Curvy corners 


SO FAR THE RESULT 
DOESN'T LOOK ANY I AGREE. LET'S 
DIFFERENT, WHICHEVER COMPARE THE CODE 
APPROACH YOU TAKE. WE HAD TO WRITE TO 
GET THE ROUNDED 
РИ CORNER EFFECT. 
A2 
l | 
<style> <style> 
#myBox { #myBox { 
background-color: #999; background-color: #999; 
border: 6px solid #000; border: 6px solid #000; 
} border-radius: 40px; 
</style> } 
<script </style> 
src="curvycorners.js"></script> 
<script> 
addEvent (window, 
'load', initCorners) ; 
function initCorners() { 
var settings = { 
tl: { radius: 40 }, 
tr: { radius: 40 }, 
bl: { radius: 40 }, 
br: { radius: 40 }, 
antiAlias: true 
} 
</script> 
IT’S STARTING THERE'S TWICE AS MUCH OF IT. BUT I THINK 
TO LOOK LIKE THE CSS YOU'VE CHEATED-TO GET THE WIDEST BROWSER 


APPROACH IS THE WINNER. EVEN —— SUPPORT, YOU NEED TO ADD BROWSER-SPECIFIC 


THOUGH THE. CURVY CORNERS RULES TO YOUR CODE. 
CODE ISN'T COMPLEX, 
THAT'S TRUE, THERE WOULD BE FOUR 
EXTRA LINES IN MY CSS IF THIS WAS (а) 
PRODUCTION CODE. I THINK I'D STILL ~ З 
а 


ВЕ WINNING, THOUGH! 
THIS ISN'T A COMPETITION, АЗ. WE'RE COLLABO 
RATING TO TRY TO FIND THE BEST APPROACH! | 
LET'S LOOK AT THE CLIENT-SIDE MARKUP FOR EACH. | 
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35 sion: absolute; 
MAGNIFICATION «; position 
1px; position 
n: 1рх; position: absolute; font-s 
sh: 1px; position: absolute; font-si. px, 
Sth: 1px; position: absolute; font-size: 1px; 
dth: 1px; position: absolute; font-size: 1px; c 
width: 1px; position: absolute; font-size: 1рх; « 
width: 1px; position: absolute; font-size: 1px; ov 
width: lpx; position 
width: 1px; position Ds ; 2 x; ом 
width: 1px; position fi LH 
width: lpx; position: ab: ; t-size x; OV 
width: 1px; position 
idth: 1px; position: a 
idth: 1px; position 
th: 1px; position 
^: 1рх; position 
1px; position 
1px; position 
ition: absolute; for* 


font-size 
; font-size: lpr 
ze 


ER, OK THERE'S A LITTLE EXTRA MARKUP INVOLVED 
WITH CURVY CORNERS, BUT IT'S NOT LIKE I HAD TO 
WRITE ALL THAT HTML MYSELF. ALTHOUGH IT WAS 
А ВІТ OF A PAIN HAVING TO ATTACH A SCRIPT, IT 
WASN'T THAT MLICH EFFORT ON MY PART. 


STILL. THERE'LL BE A 
PERFORMANCE IMPACT ON THE 
BROWSER WHEN SCROLLING 
OR RESIZING, DUE TO HAVING Dn 
THOUSANDS OF EXTRA 
ELEMENTS IN THE DOM. 


N 


WITH THE CSS3 APPROACH, 

THE BROWSER TAKES CARE OF IT ALL IN 
THE BACKGROUND AND MAY EVEN HAND OFF 
THE PROCESSING TO GRAPHICS HARDWARE 

RATHER THAN RENDER SHADOWS ITSELF. 


ON THE OTHER HAND, (553 TONT 
SUPPORTED IN EVERY 
THE CURVYCORNERS APPROACH 
BROWSER YET, AND WEB 
WILL WORK ON NEARLY EVERY 
.—— AUTHORS WILL BE DEALING 
BROWSER OUT THERE, INCLUDING 
WITH OLD VERSIONS OF 
OLD VERSIONS OF INTERNET SOME BROWSERS 
EXPLORER. 
FOR YEARS. 
P d THAT'S TRUE, 
BUT YOU CAN EASILY DETECT 
SUPPORT FOR BORDER-RADIUS ———— 
WITH JAVASCRIPT AND ONLY 
RUN THE. CURVY CORNERS SCRIPT \/) 
ON BROWSERS WITHOUT | 
SUPPORT. 
NS BROWSERS | 
THAT SUPPORT BORDER-RADIUS 
WILL GET FASTER AND LIGHTER 
WEIGHT PAGES. EVERYONE ELSE 
WON'T SEE ANYTHING AMISS. 
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In addition to the single-value 
form you saw in the previous 
example, you can also use dif- Border radius 
ferent values for each corner 


of an element. 


Like the border, padding, and margin properties, the border-radius prop- 
erty can accept up to four values. They apply starting from the upper- 
left corner and proceed clockwise around the element: 


border-radius: 40px 160px 80px 120px; 


LATER IN THIS CHAPTER, YOU'LL LEARN ABOUT SEVERAL FEATURES IN C953 THAT 
PROVIDE NATIVE SUPPORT FOR EFFECTS WEB AUTHORS HAVE PREVIOUSLY TRIED 
TO ACHIEVE WITH BACKGROUND IMAGES. THERE ARE ALSO NEW FEATURES FOR 
BACKGROUND IMAGES THEMSELVES. WE'LL LOOK AT THESE IN THE NEXT SECTION. 


New features for background images 


CSS3 offers four new features for the venerable background image: siz- 
ing; multiple backgrounds on a single element; positioning relative to 
the border, padding, or content; and clipping according to the border, 
padding, or content. In this section, you'll learn about each of these 
new features. 


Background size 


een one Background images are intended to be 


used purely for decoration, whereas 


Е Є 7.0 5.0 images placed in HTML аге supposed to 
2 mean something —this is the same separa- 
i5 е 40 36 tion-of-concerns principal that’s been dis- 
2n cussed in several previous chapters. But 
ЕЕ l : ; 
85 e 9.0 - images placed in the markup have certain 
TE practical advantages that can discourage 

o 
- О 105 10.10 web authors from doing the right thing. 
2 
ш 

© 5.0 3.0 
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ONE OF THE ADVANTAGES OF IMAGES IN MARKUP IS THAT IT'S EASY TO MAKE AN INLINE 
IMAGE SCALE ACCORDING TO THE SIZE OF ITS CONTAINER: SET THE WIDTH OF THE 
IMAGE TO BE 100%. BUT IN C582 BACKGROUNDS, THERE'S NO WAY TO MAKE THE IMAGE BE 
ANYTHING OTHER THAN ITS INNATE SIZE. THE FOLLOWING EXAMPLE SHOWS THIS ISSUE. 


\ 


In this example, an image has been set 
as a decorative background to a header: 
h1 { 
background-image: 
url('head-banner.png'); 
background-repeat: no-repeat; 
padding-top: 1.85em; 
} 
Тор padding has been set to allow room 
for the background image, and the 
image itself is sized to match the width 
of the heading. 


If the heading was to change at all, the 
background image might look a little 
incongruous. If you translate “Columbia 
Internet” into French, for example, sud- 
denly you have an image with some text 
sticking out underneath. The visual 
relationship is lost. 


The new background-size property 
allows the image to be stretched in 
proportion to the dimensions of the 
element: 
h1 { 
background-image: 
url('head-banner.png'); 
background-repeat: no-repeat; 
background-size: 100% 1.85em; 
padding-top: 1.85em; 
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display: inline-block; 
j 


The hi is set to be inline-block so its 
width shrink-wraps its content. Then 
the background image is set to be a fixed 
height and full width. You can see that 
the image becomes distorted as the 
width of the element forces it to stretch. 
For this reason, this approach is suitable 
only to allow for small changes in 
expected element width. 


If the text will stay the same but will & Е RE 66 Ey 


appear in different font sizes, it's possi- ZOLUMESA айа 

ble to avoid the aspect-ratio issue. If you 

know how wide the text will be, specify & Е e 2 е9 E) 
the width and height in proportion to ы 
COLUMBIA INTERNET 


the aspect ratio: 


hi { Z 

background-image: @ Ё e УЙ 66 8 
url('head-banner.png'); 9A 

background-repeat: no-repeat; COLUMBIA INTERNET 
padding-top: 2.18em; 
display: inline-block; 
background-size: 11.1em 2.18em; 

} 

section:nth-of-type(1) h1 1 
font-size: 200%; 

} 

section:nth-of-type(2) h1 1 
font-size: 25096; 

} 

section:nth-of-type(3) h1 1 
font-size: 300%; 

} 


The ability to size backgrounds aligns well with vector graphics. In 
chapter 5, you learned that SVG graphics, because they’re vectors, are 
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smooth and sharp no matter how much you stretch them, whereas bit- 
map graphics become blocky and blurry. Following are two examples, 
one using a bitmap PNG format and the other SVG. The SVG image is 
much sharper. 


ee ee АЛА ыба ee ee а 1 nn ee eee ee ne ey аах 
L| LI [| 
A3 A АЈ 
АЈ IS THE CREATIVE GUY : Н АЛ IS THE CREATIVE GUY : 
FOR THE COMPANY. HE'S 1 FOR THE COMPANY. HE'S 1 
UNCOMFORT ABLY CRAMMED ! UNCOMFORT ABLY CRAMMED 
JN THAT TINY CREVASSE ' ! IN THAT TINY CREVASSE ! 
BETWEEN THE TECHIES ND ! ! BETWEEN THE TECHIES АЮ ! 
THE MARKETING PEOPLE. I ! THE MARKET ING PEOPLE. Ц 
THIS MEANS HE'S NOT LI LI THIS MEANS HE'S NOT LI 
DISLIKED BY ANYONE. BUT L| LI DISLIKED BY ANYONE. BUT 1 
THEY ALL LOOK AT HIM | L| THEY ALL LOOK AT HIM 1 
FUNNY FROM TIME TO TIME. | [| FUNNY FROM TIME TO TIME. | 
HE LOVES MOST COMPUTER | 1 HE LOVES MOST COMPUTER | 
GAMES, NIFTY АКТ. AND HAS A 1 П GAMES, NIFTY ART. AND HAS A П 
BIG BROTHER RELATIONSHIP 1 1 n f BIG BROTHER RELAT IONSHIP 1 
WITH THE DUST PUPPY. 1 М WITH THE DUST PUPPY. ! 
—— eee — ——— 2 n ww ee 
div { div 1 
background-image: background-image: 
url('aj.png'); url('aj.svg'); 
background-repeat: no-repeat; background-repeat: no-repeat; 
background-size: 50% 100%; background-size: 50% 100%; 
padding-left: 50%; padding-left: 50%; 
display: inline-block; display: inline-block; 
} } 
as 3) ALTHOUGH SVG WORKS WELL WITH BACKGROUND SIZING, IT’S A BAD FIT FOR 
7S | PHOT OGRAPHIC-TYPE IMAGES. YOU MAY WANT TO SET A SINGLE PICTURE 


Ф) BEHIND YOUR CONTENT, SIMILAR TO THE EFFECT ACHIEVED BY SETTING А 
~ №. —— DESKTOP BACKGROUND ON YOUR COMPUTER. IN THIS CASE, THE DETAIL OF THE 
NY IMAGE ISN'T AS IMPORTANT, SO DISTORTION IS LESS OF AN ISSUE. 


This example shows the main content 
with a semitransparent background over- 
laid on a background image set to fill the 
entire box. Here’s the markup: 

<section> 


<div> 
<p>In almost every...</p> 
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</div> 
</section> 


And here’s the CSS: 


section { 
margin: 1em; 
padding: 5%; 
outline: 4px dashed black; 


' nad ARRANGE AND COMBINE TS NUMERICAL 

background: url('10years.jpg') top / QUANTITIES EXACTLY AS IF THEY WERE LETTERS OR 

ANY OTHER GENERAL SYMBOLS AND IN FACT IT MIGHT 

100% no-repeat; BRINS QUT тта RESULT S IN NOEDRATGA NOTATION 


display: inline-block; 
min-height: 342px; 
min-width: 300px; 
} 
div { 
background-color: 
rgba(255,255,255,0.66); 
} 


Unlike the previous examples, it uses 
the shorthand syntax. The size appears 
with the position separated by a 

slash: top / 100%. 


NOTE THAT ALTHOUGH SEVERAL BROWSERS HAVE IMPLEMENTED background-size, 
ONLY OPERA HAS IMPLEMENTED THE SHORTHAND SYNTAX. FOR OTHER BROWSERS, 
aa YOU'LL HAVE TO STICK WITH A SEPARATE background-size DECLARATION. 


\ SCALING ISN'T THE ONLY NEW BACKGROUND FEATURE 


ADDED IN CSS3. YOU CAN ALSO ATTACH MULTIPLE 
BACKGROUNDS TO A SINGLE ELEMENT. IN THE PREVIOUS NS 
EXAMPLE, AN ELEMENT WAS ADDED TO THE MARKLIP WHOSE 
ONLY ROLE WAS TO ADD A BACKGROUND TO THE TEXT. IN 
THE NEXT SECTION, YOU'LL SEE HOW CSS3 ALLOWS YOU 

TO DO THIS WITHOUT ADDITIONAL MARKUP FOR STYLING. ve 


Multiple backgrounds 


In CSS2, you're only allowed one background image per element, but 
there are many situations in which you might want more than one 


image: 


^ A header has a background image spanning the width of the page as 


well as a company logo. 
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© A decorative pull-quote box has opening and closing quotes on 
either side. 


^ Beveled buttons or tabs have images for the left and right sides. 


© A rough-edged paper scroll effect needs a repeating image down 
both sides. 


Often, web authors use CSS tricks to size a child element to match its 
container so their background images can overlap (this is known as the 
sliding doors technique). But they frequently have to introduce an extra 
element to support the styling, or even add a decorative image inline in 
the markup. 


= ALL THESE APPROACHES END UP 

Standard Prefixed ADDING PURELY PRESENTATIONAL 

MARKUP TO THE PAGE. OR, DEPENDING 

ON THE ELEMENTS, BEING COMBINED 

7.0 z IN A PARTICULAR WAY. ALTHOUGH 

THIS USUALLY ISN'T A MAJOR ISSUE NS 
IN THESE ISOLATED INSTANCES, IT 


: © 
o 
Ф 
on 
ot 
m 36 INDICATES A LACK OF POWER IN THE Z 
$e i й PRESENTATION LANGUAGE, CSS. | 
55 THIS LACK OF POWER IS ADDRESSED | 
t$ IN C593, AS YOU'LL SEE IN THE 
EOS a 9.0 - EXAMPLES THAT FOLLOW. 
оф ` 
ар 
55 
ПО - 
2 
m 
e^" 


шишип WENT M Nm (A 2 


IN ALMOST EVERY COMPUT AT ION A GREAT VARIETY OF 
ARRANGEMENT S FOR THE SUCCESSION OF THE 


Let's revisit the last example from 


the previous section, except this time 
without the additional <div> element 


AMONGST THEM FOR THE PURPOSES OF A CALCULAT ING 
ENGINE. ONE ESSENTIAL OBJECT IS TO CHOOSE THAT 
ARRANGEMENT WHICH SHALL TEND TO REDUCE TO A 
MINIMUM THE TIME NECESSARY FOR COMPLETING THE 
CALCULATION 


for wrapping the content: 


<section> MANY PERSONS WHO ARE NOT CONVERSANT WITH 
MATHEMATICAL STUDIES IMAGINE THAT BECAUSE THE 
<p>In almost every...</p> BUSINESS OF IBABBAGE'S ANALYTICAL ENGINE] IS TO 
Җ GIVE ITS RESULTS IN NUMERICAL NOTATION THE 
</section> 


ENGINE CAN ARRANGE AND COMBINE ITS NUMERICAL 
QUANTITIES EXACTLY AS IF THEY WERE LETTERS OR 
ANY OTHER GENERAL SYMBOLS: AND IN FACT IT MIGHT 
BRING OUT ITS RESULTS IN ALGEBRAICAL NOTATION. 
WERE PROVISIONS MADE ACCORDINGLY. 


Despite losing the extra element, the 
page looks the same, because two 
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backgrounds are applied to the 


<section> element: 


section { 
margin: 1em; 
padding: 5%; 
outline: 4px dashed black; 
background: 
urLC'trans—66.png') 
50% 50% no-repeat, 
url('10years.jpg') no-repeat; 
background-size: 90% 90%, 
100%; 
display: inline-block; 


Adding multiple background images 
is a matter of listing them in the back- 
ground property, along with any rele- 
vant attributes, separated by 


commas: 


background: top right 

url('pitr-head.png') no-repeat, 
bottom right 

url('aj-head.png') no-repeat, 
top left 

url('mike-head.png') no-repeat, 
bottom left 

url('sid-head.png') no-repeat; 


See the full example in ch10/back- 
grounds-5.html. 


All the other background properties also allow a comma-separated list, 
So you could write the previous example as follows: 


background-image: url('pitr-head.png'), url('pitr-head.png'), 
urLC'mike-head.png'), url('sid-head.png'); 
background-position: top right, bottom right, 
top left, bottom left; 
background-repeat: no-repeat, no-repeat, 
no-repeat, no-repeat; 
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The background image you list first 
will be the closest to the viewer. If 
you put all the images in the same 
place, you can see that the first 
image covers the rest: 


background: center 
url('pitr-head.png') no-repeat, 


center 

url('aj-head.png') no-repeat, 
center 

url('mike-head.png') no-repeat, 
center 


url('sid-head.png') no-repeat; 


See the full example in ch10/back- 
grounds-6.html. 


You can use this behavior to your 
advantage to create interesting 
effects. This examples use a 
semitransparent PNG image in 
between each of the other 
background images to create 

a progressive fade: 


background: top right 
url('pitr-head.png') no-repeat, 
urLC'trans—66.png'), 
bottom right 
url('aj-head.png') no-repeat, 
urLC'trans—66.png'), 
top left 
url('mike-head.png') no-repeat, 
urLC'trans—66.png'), 
bottom left 
url('sid-head.png') no-repeat; 


See the full example in 
chl0/backgrounds-7.html. 
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Background origin and clipping 


CSS2 has no control over what part of an element the background 
applies to. Because CSS2 doesn’t allow background sizing, most 
authors haven’t encountered this limitation; but CSS3 introduces two 
new properties to give web authors fine-grained control: background- 
origin and background-clip. 


THIS SECTION REQUIRES AN LINDERST ANDING OF THE CSS 
BOX MODEL TO GET THE MOST OUT OF IT. IF YOU AREN'T 
SURE, PLEASE REFER TO THE DISCUSSION IN APPENDIX C OR 
THE DIAGRAMS IN CHAPTER 8 BEFORE PROCEEDING. 


The default for background-origin is 
padding-box. This means the background 
applies to the area containing the padding 
but not to the area containing the border: 
section { 

margin: lem; 

padding: lem; 

border: 1em dashed black; 

background-origin: padding-box; 


j 


Remember, this example image is scaled to 
fill its container and set to not repeat. 


Setting the origin to border-box means the 
background now extends out under the 


border: 


section 1 
margin: lem; 
padding: 1em; 
border: 1em dashed black; 
background-origin: border-box; 
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Finally, content-box limits the background pem =z 
to the content area, inside the padding: н 


section { 
margin: lem; 
padding: lem; 
border: 1em dashed black; 
background-origin: content-box; 


The default value for background-clip is 
border-box: 


section { 
margin: lem; 
padding: 1em; 
border: 1em dashed black; 
background-clip: border-box; 


} 


Remember that the example is scaled and 
set to not repeat. 


When applied to backgrounds that don’t 
repeat, this is indistinguishable from paa- 
ding-box, because of the default value of 
background-origin: 
section 1 

margin: 1em; 

padding: 1em; 

border: 1em dashed black; 

background-clip: padding-box; 


But if the background is allowed to 
repeat, the difference becomes apparent. 
A setting of padding-box clips the image 
inside the border, but for border-box you 
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can see the repeating image under the 


border: 


section { 
background-clip: border-box; 
background-repeat: repeat; 


Finally, content-box clips the background 
to the content area: 


section 1 
margin: lem; 
padding: 1em; 
border: 1em dashed black; 
background-clip: content-box; 
} 
Note that even though the background is 


clipped, the image is still sized to the pad- 


ding-box. 


SCALING BACKGROUNDS UNIFORMLY MAY NOT ALWAYS PRODUCE THE 
EFFECT YOU WANT. ALTHOUGH THE SLIDING DOORS TECHNIQUE PROVIDES 
A WORKAROUND, THERE'S A MORE STRAIGHTFORWARD CSS3 APPROACH TO NS 
ACHIEVE THE SAME EFFECT: border-image. LET'S LOOK AT THAT NEXT. 


Selective background scaling with border images 


When you re trying to create flexible layouts, you often want a back- 
ground that looks the same for most of its length, but with a certain num- 
ber of pixels at either end that are slightly different. This is especially 
true when you want to create a rounded element with a beveled effect. 
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Tarems 


UNIQUE START UNIQUE END 


REPEATING CENTRAL 
SECTION 


Here are some examples: 


Rounded corners ona beveled 


Weird & Wonderful Edit 


Buttons with rounded corners 


Log In 


Most Emailed Most Viewed Most Recommended 


and shading on wordpress.com 


Tabs with rounded corners and 
shading on yahoo.com 


The border-image property allows you to slice up an image and apply 
transformations selectively to each slice. It’s simpler than it sounds, as 
you'll see after a few examples. 


THE ABILITY TO ADD AN IMAGE TO A BORDER IS ONE OF THE MORE POWERFUL 
FEATURES OF CSS3; UNFORTUNATELY IT'S ALSO ONE OF THE LEAST INTUITIVE. 
DESPITE BEING SUPPORTED BY FIREFOX SINCE VERSION 3.0 IT'S SEEN FAR 
LESS UPTAKE THAN SEVERAL OTHER FEATURES IN THIS CHAPTER. 


Basic border-image 


To start with, let’s use the following example image. It’s 240 pixels 
square, and it contains five smaller images, each of which is approxi- 
mately 80 pixels square. 
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Let’s start with the simplest possible 


example and apply the border image 


to an element 720 pixels wide and 


400 pixels high: 


height: 400px; 
width: 720px; 
border-width: 80px; 
border-style: solid; 


border-image: url('borderi.png') 80; 


As you can see, the center disappears. 


If you want to retain the center of the 


image, use the fill keyword: 


height: 400px; 
width: 720px; 
border-width: 80px; 
border-style: solid; 
border-image: 


url('borderi.png') 80 fill; 


The center of the image is stretched 


to fill the space, but the corners stay 


where they are. 
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This diagram shows what’s going 
on. The border-image value of 80 
specifies a pixel length, which the 
browser uses to slice the image 
into nine sections, each of which is 
80 pixels square. 


The four corner sections aren’t 


adjusted: they remain in the corners 
of the elements. The center segment 
expands to fill the remaining space. 


Stretching and repeating border-image sections 


IN THE PREVIOUS EXAMPLE, THE 
MIDDLE SEGMENTS ON THE SIDES ARE 
ALSO STRETCHED, BUT YOU CAN'T SEE 
THAT BECAUSE THEY'RE SOLID WHITE. 
AY TO ILLUSTRATE, LET'S LOOK AT AN 


\ EXAMPLE WITH A DIFFERENT IMAGE. & 
| | 


Let’s apply the same rules with this 


new image: n 
height: 400px; 

width: 720px; 

border-width: 80px; 


border-style: solid; 
border-image: url('border2.png') 80; 


Now the stretching of the middle 
segments on the sides is more 
apparent. 
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The pattern fits neatly inside the 
middle segments, each 80 pixels 
square. As you saw before, the cor- 
ners stay the same but the middle 
segments are stretched. This is 
because when you omit the third 
parameter to border-image, you get 


the default. The previous example is 
equivalent to this: 


border-image: 
url('border2.png') 80 stretch; 


You can use two other keywords 
instead of stretch. The first is repeat: 


height: 400px; 

width: 720px; 

border-width: 80px; 
border-style: solid; 
border-image: 
url('border2.png') 80 repeat; 


| 


The image in the middle segment is 
repeated across the available width 


and height. 


The second is round: 


& 
border-image: 
url('border2.png') 80 round; 
It looks like there's no difference 
between repeat and round, but that's 
due to a careful choice of element & 
size to demonstrate the technique. 
If the size of the element is reduced 
slightly, the difference is apparent. 
Look at the following two screen- 
shots of the same two rules applied 


to a 680 x 560-pixel element. 
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$OOOOOOOO? 


: 


&OOOOOOOO- 3 


€ 000000000 


repeat RETAINS THE WIDTH round ADJUSTS THE. d 
OF THE CENTER SEGMENT- WIDTH OF THE CENTER @ = 

L^ IF ІТ DOESNT FIT ACROSS SEGMENT TO FIT A | (^ 
THE WIDTH OF THE BOX, WHOLE. NUMBER OF TIMES ~ A 
THEN PARTS OF THE ACROSS THE WIDTH. 9 
SEGMENT ARE CUT OFF. ( oe 


WHEN YOU HAVE A MIDDLE SEGMENT THAT MAKES A REPEATED PATTERN, 
round WILL USUALLY BE WHAT YOU WANT. IF THE MIDDLE SEGMENT IS A 
Pa SOLID COLOR OR GRADIENT, LIKE A BEVELED EDGE, USE repeat TO 
Ww AVOID ANY DISTORTION FROM THE BROWSER ADJUSTING THE IMAGE. 


| \ 


You may be curious about what hap- 
pens to the middle segment when you 
use repeat or round. This screenshot 
shows that the middle behaves in the 
same way as the middle segments on 


the border: 


border-image: 
urLC'border3.png') 80 fill round; 


If you ever need to create internet 
bank notes, this may be the way to go. 


You can also use different approaches 
on the horizontal and vertical borders: 
border-image: 


url('border3.png') 
80 fill round stretch 


The first keyword applies to the hori- 
zontal borders, and the second to the 
vertical borders. 
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Using border-image to create common effects 


NOW YOU KNOW ENOUGH TO IMPLEMENT ALL THREE EXAMPLES FROM THE 
BEGINNING OF THIS SECTION. LET'S TAKE A SINGLE, FIXED-SIZE IMAGE AND USE Py 
IT TO MAKE ELEMENTS THAT ADAPT IN SIZE TO THEIR CONTENTS YET RETAIN A 
SHARP IMAGE AT THE EDGES FOR ROUNDED-CORNER AND BEVEL EFFECTS. 
ә 


l | 


First, let’s make some buttons and tabs. Here’s a generic 
image to provide the background for both. 


Using this image, you can easily create buttons like these. 


The code for the border image on each of these buttons is 


border-width: 45px; 
border-style: solid; 
border-image: url('border4-bevel.png') 45 fill repeat; 


Each button's text size is set individually, and each has a different 
amount of text. Notice that the buttons aren't even the same shape as 
the original image, but it has been adapted seamlessly. 


Now let's use the same image to create some tabs. 


The Second Tab Tab Three 


To achieve tabs, you have to adjust one line of CSS from the previous 
example. Set the bottom border width to 0: 


border-width: 45px 45px Өрх 45px; 
border-style: solid; 
border-image: url('border4-bevel.png') 45 fill repeat; 
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The border image, as with the buttons, adapts to the size of the content. 


You've already seen the direct support for 
box shadows in CSS3, but they can also be 
achieved with border-image. If you combine 
this CSS with the image on the right, you 
can achieve the results that follow: 
border-image: 

url('drop-shadow.png') 70 repeat; 
You're not likely to use this technique often, 
but on occasion you may want more precise 
control over a shadow than box-shadow 
allows. 


| Drop shadow 1 The Second drop shadow Shadow Three | 


border-image IS HARD TO OVERRIDE SELECTIVELY. IF YOU WANT 


CSS SUPPORT (IF AVAILABLE) AND border-image IF NOT, YOU'LL 
NEED TO USE SOMETHING LIKE MODERNIZR.JS. 


S E TO SCALE AN IMAGE ACROSS A BACKGROUND WITH THE BUILT-IN 
OY 


\ 


Creating gradients with CSS 


Gradients —smooth transitions from one color to another — have always 
been popular with designers. In CSS2, the only way to implement a 
gradient is to create it as an image in a graphics program and attach it 
as a background to the element. This has problems and limitations, sev- 


eral of which you're already familiar with: 


^ Images don't always scale well, which can create problems when you 
use an image as a background for content that's intended to scale. 


: If you decide to change your color scheme slightly, you may have to 
regenerate all your gradient images. 
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^ Every different gradient you want EUR ари 
{о use means an extra download 
from the server, increasing page- E е - 3.0 
load times for users and your $ 
bandwidth requirements. = е - 3.6 
If the element color will change in zE 
response to user interaction — for 28 [4 - 10.0* 
example, а menu item on mouse- 0^ 
over —you need to make twice as 8 О - 11.10 
many images, doubling all the E 
problems just mentioned. @ Е 40 
* TE had heen. able to do simple gradients 
with the nonstandard filter attribute 


since version 5.5. 


CSS GRADIENTS ARE ALLOWED ANYWHERE YOU CURRENTLY CAN SPECIFY 
AN IMAGE. AT THIS TIME, BROWSERS ONLY HAVE SUPPORT FOR USING 
THEM AS BACKGROUNDS, SO THE EXAMPLES CONCENTRATE ON THAT. 


SA 


In this section you'll use a snippet of HTML like this: 


«div id="gradient">&nbsp; 
«/div» 


You'll also need some basic CSS like this: 


#gradient { 
outline: 1px solid #999; 
min-height: 400px; 
max-width: 400px; 
background: none; 


} 


The CSS snippets shown next should be inserted in place of the back- 
ground: none; property to achieve the screenshots shown in a support- 
ing browser. See the section "Browser support" for details of prefixes 
required to access experimental support. 
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A simple gradient is easy — specify the direction 
and two colors. The browser calculates a gradient 
across the entire background, treating the first 
color as the starting color and the second as the 
end color: 
background: linear-gradient( 

to bottom, #000, #fff 
2; 


In addition to up and down, gradients can go 
from one side to another: 
background: linear-gradient( 


to right, #000, #fff 
2; 


Maybe you want something other than up and 
down or left and right. You can combine the two 
to get diagonal gradients: 
background: linear-gradient( 

to bottom left, #000, £fff 
э; 
The direction can also be specified in degrees. 
The above rule is equivalent to this: 
background: linear-gradient( 


315deg, #000, #fff 
35 


If you add more colors, the browser treats them 
as equally spaced color stops and calculates the 
gradient accordingly: 

background: linear-gradient( 


to bottom, #000, #fff, #000, #fff 
25 
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Finally, if you don’t want the color stops to be == 


evenly spaced, you can give percentage values 


for each color stop: 
background: linear-gradient( 
to bottom, 


#000, 
#ЕҒЕ 15%, 
#000 85%, 
#fff 

33 


LINEAR GRADIENTS ARE ALL VERY WELL, BUT SOMETIMES YOU WANT A MORE 
CIRCULAR EFFECT —FOR EXAMPLE, A SPOT HIGHLIGHT ON A GLASSY BUTTON. 
CSS3 LETS YOU CREATE RADIAL GRADIENTS; WE'LL LOOK AT THEM NOW. E 
ә 
l j 


Radial gradients are as simple as linear gradients. 
You supply a start color and an end color: 


background: radial-gradient( 
#000, #fff 
); 


The gradient starts at the center and extends to 
the boundary of whatever element it’s applied to. 


You can achieve more interesting effects by posi- | 
tioning the center of the gradient: 
background: radial-gradient( 
at top, #000, #fff 
2; 


The at keyword is used to specify the center point. 


The gradient center can be positioned anywhere: 


background: radial-gradient( 
at 25% 25%, #000, #fff 
2; 


www.it-ebooks.info 


382 


9 


СНАРТЕК 10 Borders and backgrounds with С555 


Using the contain keyword means the gradient 

stops when it touches the edges of the containing г 
element: 

background: radial-gradient( 


at 25% 25%, contain, #000, #fff 
2 


have any number of color stops: 


As with linear gradients, a radial gradient can » 


background: radial-gradient( 
at 25% 25%, #000, #fff, #000, £fff 
2; 


BECAUSE GRADIENTS REPLACE BACKGROUND IMAGES, YOU CAN USE 
THE SAME BACKGROUND PROPERTIES ON THEM AS YOU USE FOR 
BACKGROUND IMAGES. YOU CAN USE THIS TO YOUR ADVANTAGE TO 
PRODUCE SOME USEFUL EFFECTS, AS YOU'LL SEE NEXT. 


\ 


If you want your gradient to only cover part of 
the background, you can use the background-size — 
property: 
background: linear-gradient( 
top, 4000, #ҒҒҒ 
) no-repeat; 
background-size: 100% 50%; 


This might be most useful when you want to put 
a gradient in a fixed part of the background 
rather than scale it across the whole thing. 


You can also size a radial gradient, although the 
effect isn't as pleasing: 


background: radial-gradient( 
at 25% 25%, #000, #fff 

) no-repeat; 
background-size: 100% 50%; 
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This does let you see another property of radial 
gradients: by default they’re ellipsoid rather than 
circular. You haven't noticed until now because 
you've been applying them to square elements. 


You can make the gradient circular using the 


circle keyword: 


background: radial-gradient( 
circle at 25% 25%, 4000, #ҒҒҒ 
) no-repeat; 

background-size: 100% 50%; 


NOTE THAT THE SPECIFICATION ALLOWS YOU TO SPECIFY A SIZE FOR THE GRADIENT == 
WITHIN THE GRADIENT ITSELF. ONE OF THE REASONS THE to AND at KEYWORDS WERE 09 
ADDED WAS TO ALLOW LENGTHS FOR SIZING ТО BE ADDED LINAMBIGUOUSLY —~_ A“, || 
ALONGSIDE THE POSITION. HOWEVER, AS YET NO BROWSER SUPPORTS THIS SYNTAX, | 
SO CURRENTLY IT'S MORE RELIABLE TO USE background-size. M / 


у) 


It’s also possible to layer multiple gradients if you 
use RGBA colors. Here’s a radial gradient over a 
linear gradient to create a highlight effect: 


background: radial-gradient( 
circle at 25% 25%, 
rgba(255,255,255,0.75), 
rgba(255,255,255,0) 
) no-repeat, 
linear-gradient( 
to bottom, #000, #fff 
) no-repeat; 


There's no reason your gradient can't have the 


uS 


same starting and ending colors. This example 
modifies the final example from "Multiple back- 
grounds" to use a gradient instead of loading an 


extra image from the server: 


background: top right 
url('pitr-head.png') no-repeat, 
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linear-gradient(top, 
rgba(255,255,255,0.5), 
rgba(255,255,255,0.5)), 

bottom right 

url('aj-head.png') no-repeat, 

linear-gradient( 
top,rgba(255,255,255,0.5), 
rgba(255,255,255,0.5)), 

top left 

url('mike-head.png') no-repeat, 

linear-gradient(top, 
rgba(255,255,255,0.5), 
rgba(255,255,255,0.5)), 

bottom left 
url('sid-head-bg.png') no-repeat; 


This replaces the image used in the multiple-background example in 


listing ch10/backgrounds-7.html. 


NOW YOU'VE SEEN ALL THE NEW FEATURES. LET'S TAKE A 
A" DETAILED LOOK AT CURRENT BROWSER SUPPORT. 


USER FRIENDLY by J.D. "Illiad" Frazer 


HEY, I'VE BEEN 
SNAZZING UP THE WEBSITE 
WITH CSS DROP SHADOWS. 


WELL, IT WILL LOOK GREAT 
IN A FEW YEARS... 


COOL —LET'S 
HAVE A LOOK! 


DOESN'T IT WORK IN 
ANY CURRENT 


COPYRIGHT ©2008 J.D. "MHad" Frazer HTTP://WWW,.USERFRIENOLY.ORG/ 


Prowser eupport 


Browser support for CSS3 border, background, and gradient features 
is pretty good —all the major browsers have some support, or will soon 
have support, for everything but border-image in currently released 
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versions. А lot of vendor extensions are involved, and IE8 and earlier 


take quite a bit of work, as we'll look at next. 


©¢coOo @ 

12 14 4 6 8 |9 |10 | 11.1 | 11.5 5.1 
text-shadow ° ° ° ° o о о б б ө 
box-shadow ° ° ° ° o ° ° ° ° ° 
border-image o o o о о о о 
border-radius ° ° ° ° ° ° ° ° ° 
Multiple back- ° ° ° ° ° ° ° ° ° 
grounds 
background-size ° ° ° ° ° ° ° ° ° 
Gradients o о о о ° о о о 
Кеу: 


e Complete or nearly complete support 
o Incomplete or alternative support 


Little or no support 


browser drop shadows 
Chrome (before 10), Safari (before 5.1), and Firefox (before 4.0) use a 
vendor extension for box and text shadows; the vendor extension is the 
same for both. Neither of the WebKit browsers initially supported 
inset but current versions do; spread-radius support was added in 
Chrome 8 and Safari 5 but didn't work reliably until Chrome 10 and 
Safari 5.1. Opera and Microsoft were confident enough in the stability 


of the spec to skip the vendor extension stage and implement the box- 


shadow rule directly. 


To support all browsers, you'll need to issue multiple declarations like 


this: 


-moz-box-shadow: rgb(0,0,0) 3px 3px 3px 9px; 
-webkit-box-shadow: rgb(0,0,0) 3px 3px 3px, rgb(0,0,0) 3px 3px 9px; 
box-shadow: rgb(0,0,0) 3px 3px 3px 9px; 
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Note that, because the old WebKit-based browsers don’t support 
spread-radius, an extra shadow has been added in an effort to simulate 
the effect. Text shadows are supported, using the standard syntax in 
Safari 1.1 and Chrome 2.0, but support for multiple shadows was only 
added in the 4.0 versions. 


Cross-browser C553 gradients 


THE GRADIENT SYNTAX CHANGED SIGNIFICANTLY SINCE THE ORIGINAL 
WEBKIT PROPOSAL. FIRST MOZILLA PROPOSED A SIMPLER SYNTAX, THEN THE 
" W3C ADDED SOME ADDITIONAL KEYWORDS. HERE IS A SUMMARY OF THE 


DIFFERENCES. 
GRADIENT TYPE 
MOVED TO PART OF 
о = 
-webkit-gradient(linear, -moz JTinear-gradient( linear-gradient( 
SIMPLER POSITION _ 
left top, left bottom, VALUES СОР ———— —»  fobot tomy) 
р top, | D TION to bottom, 


INSTEAD OF 


——— йй ей #0ae, 
NO NEED FOR EXPLICIT POSITION 
START AND END STOPS #fff 50%, #fff 50%, 


color-stop(0.5, #fff), #6с0 50%, #6с0 50%, 
color-stop(0.5, #6с0)) SIMPLER COLOR fff) #fff) 
STOP SYNTAX 
ORIGINAL PROPOSED W3C 
WEBKIT MOZILLA SYNTAX 
SYNTAX SYNTAX 


For older WebKit-based browsers, you should use the original syntax. 
Use the Mozilla syntax in older Firefox and newer versions of Safari 
and Chrome. Newer Firefox as well as Opera 12 and the IE10 preview 
support the standard syntax, Firefox and Opera with a vendor prefix. 
To support all browsers that support CSS gradients, your cross- 
browser code should look something like this: 


FALLBACK FOR BROWSERS 
background: #6c0; -«————-  WITHNO SUPPORT 
fr background: -webkit-gradient(linear, left top, left bottom, 
from(#00abeb), to(#fff), 
эур ана color-stop(0.5, #fff), WEBKIT SUPPORT 
color-stop(0.5, #66сс00)); 
background: -webkit-linear-gradient( а 
top, #0ae, #ҒҒҒ 50%, #6с0 50%, #fff); ту 
background: -moz-linear-gradient( SUPPORT 
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top, #0ae, #fff 50%, #6c0 50%, #fff); FIREFOX 
background: -moz-linear-gradient( <———_ SUPPORT 

to bottom, #0ae, #fff 50%, #6c0 50%, #fff); OPERA 
background: -o-linear-gradient( чч SUPPORT 

to bottom, #0ae, #fff 50%, #6c0 50%, #fff); 
background: linear-gradient( — SUPPORT FOR 

to bottom, #0ae,#fff 50%, #6с0 50%, #ҒҒҒ) ; ela ed NE 

(AT THE TIME OF 


WRITING, JUST ТЕО) 
This will produce a two-tone gradient like 


the following in all browsers that support 
CSS3 gradients. 


You can see this example in ch10/gradient- 
15.html. Browsers that don't support gradi- 
ents display a green background; every- 
thing else shows the gradient. 


Cross-browser backgrounds and border-image 

border-image has changed significantly since it was first introduced. All 
the original implementations follow the shorthand property from the 
September 2008 Working Draft. Following that draft, significant 
changes were made that added specific properties for each component, 
such as border-image-source, border-image-slice, and the fill keyword. 
Before, border-image was like a subproperty of border; now it's a stand- 
alone property with subproperties of its own. 


It's likely that vendors will move toward the new syntax when the spec 
reaches the Proposed Recommendation status. In the meantime, you 
can use it in a cross-browser way while still being compatible with the 


current spec: 
LEGACY FIREFOX 
-moz-border-image: url('borderl.png') 80; 4—7 SUPPORT 


LEGACY WEBKIT 
webkit-border-image: url('border1.png') 80; -«———— SUPPORT 


LEGACY OPERA 

-о-рогаег-ітаде: url('borderl.png') 80; 4—7 SUPPORT 
SUPPORT FOR 2008 DRAFT 

border-image: url('border1.png') 80; 4 IMPLEMENTATIONS 


SUPPORT FOR CURRENT 
border-image: url('border1.png') 80 fill; а“ DRAFT IMPLEMENTATIONS 
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To get border-image to work in current browsers, you need to first spec- 
ify the vendor-specific properties for Firefox and Safari/Chrome. Next, 
give the September 2008 version of the property for Opera, and finally 
the current version of the property with the fill keyword. This will 
ensure that future browsers that fully implement the property will 
render identically to current browsers, which treat fill as being the 


default and ignore the fill keyword. 


UNFORTUNATELY, IF YOU DON'T WANT THE BEHAVIOR FROM THE 2008 SPEC 
THAT TREATS £111 AS THE DEFAULT, THERE'S NO WAY TO OVERRIDE IT IN 
CSS IN OLDER BROWSERS. THE EASIEST WAY TO ACHIEVE THIS IS TO USE 
AN IMAGE THAT'S BLANK OR TRANSPARENT IN THE CENTRAL AREA. 


USER FRIENDLY by Illiad 


NONE OF THIS WORKS IN YOU SAID “STANDARD CS5'— I KNEW ТТ! MICROSOFT MAKES A 
INTERNET EXPLORER! WHAT ARE YOU HIDING, YOU SUPERIOR PRODUCT. THAT'S WHY 
MICROSOFT HATER? IT DOMINATES THE BROWSER 
ТЕЧ ADDS SUPPORT FOR A IE HAS HAD A WAY TO 
LOT. BUT ТЕВ DOESNT = DO GRADIENTS SINCE 
SUPPORT STANDARD CSS 


SS. н / 
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Supporting old versions of Internet Explorer 


Internet Explorer was the first browser to implement a method for 
specifying drop shadows in CSS, way back in the version 5.5 release. 
Microsoft implemented a method of calling an ActiveX control and 
applying it to an element that can be used either from CSS or Java- 
Script. ActiveX has a pretty bad reputation in web developer circles 
that may partly explain why these techniques weren't seriously 
explored until recently. There are two filters for shadows in IE8: Drop- 
Shadow and Shadow. 
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DropShadow can accept a color value with alpha 

transparency(make sure all this code goes on a 

single line in your CSS): 

-ms-filter: "progid: 
DXImageTransform.Microsoft.DropShadow 
Ccolor=#ff000000, offX-4, of FY=4)" 


The color parameter here uses four hexadecimal 
pairs. The last three pairs are equivalent to the 
way you specify black in CSS: #000000. The first 
hex pair is a value between 0 and 255 for opac- 
ity: FF is fully opaque. 


Shadow fades the color to transparent, like box- 

shadow, but you must specify an opaque color: 

-ms-filter: "progid: 
DXImageTransform.Microsoft.Shadow(C 


color=#000000, direction=135, 
strength=4)" 
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The main difference between the two is that Shadow applies a gradient to 


the edges, whereas DropShadow is a constant color. The listing for this 


example is in ch10/shadow-ie-1.html. 


SHADOW APPLIES SO IT WILL APPLY TO THE ENTIRE ELEMENT RATHER THAN 
JUST THE TEXT. IF YOU WANT A SHADOW ON THE TEXT, YOU NEED TO LEAVE 
THE BACKGROUND TRANSPARENT. AS YOU MAY GUESS, THIS MAKES APPLYING A 


THE EXAMPLE HAS A BACKGROUND COLOR ON THE ELEMENT TO WHICH THE @, 
SA 


SHADOW TO BOTH THE TEXT AND THE BOX A BIT MORE INTERESTING. 


There's also an IE filter for gradients. Here are 
two examples; the full code is in ch10/gradient- 
ie-1.html (the lines have been broken so they fit 
on the page; in your CSS make sure they appear 
on a single line): 


l | 


-ms-filter: "progid:DXImageTransform.Microsoft.gradient( 
GradientType-1, startColorstr-ZCC1C5B9B, endColorstr=#E56CBFFF)"; 
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-ms-filter: "progid:DXImageTransform.Microsoft.gradient( 
GradientType-0, startColorstr=#88FFFFFF, endColorstr-400FFFFFF)"; 


Compared to CSS gradients, they're very limited. You can specify only 
start and end colors; no additional color stops are available, and they 
can only be vertical or horizontal. 


Note that if you want to use semitransparent colors in the gradient, you 
should also set the background color back to transparent in the rule: 


background: transparent; 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( 
GradientType-0, startColorstr=#88FFFFFF, endColorstr-400FFFFFF)"; 


Otherwise both the background color and the gradient will apply, and 
you'll see the gray background through the gradient. The -ms-filter 
property doesn't override an existing background property. 


ТЕЧ HAS FULL SUPPORT FOR THE CSS STANDARDS FOR BOX SHADOWS AND 
ROUNDED CORNERS. IEIO PREVIEW RELEASES HAVE INCLUDED SUPPORT FOR 
CSS3 GRADIENTS. USE CONDITIONAL COMMENTS TO PROVIDE A SPECIFIC 
STYLESHEET TO IE8 AND EARLIER IF YOU WANT TO SUPPORT ALL 
VERSIONS, OR INVESTIGATE A SOLUTION LIKE C553 PIE. 


\ 


C595 PIE for easy IE support 


CSS3 PIE takes advantage of another proprietary IE CSS extension — 
behaviors—to make older versions of IE support standard CSS3 syn- 
tax. A behavior is a script file that executes as the CSS is being applied to 
an element. Although there are some performance and security con- 
cerns, behaviors offer a convenient way to add CSS3 support in IE8 and 
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earlier. This element with rounded corners, a 
gradient, and a drop shadow was created by 
applying a mostly standard CSS rule. 


The screenshot was taken in IE8. Here’s the CSS 
(see the page in full in ch10/css-pie.html): 


div { 
border: 1px solid #999; 
border-radius: 10px; 
box-shadow: rgb(0,0,0) 3px 3px 3px 3px; 
-pie-background: linear-gradient(top, #000, #fff); 
behavior: url(../libs/PIE/PIE.htc); 


} 


There are two nonstandard properties here. Behavior is the proprietary 
IE property that allows all the magic to happen; it contains the URL of 
the file that implements the behaviors. -pie-background is required 
because, unlike border-radius and box-shadow, IE8 already understands 
the background property and will discard any values that it considers 
invalid. 


Summary 


In this chapter, you've learned about features of CSS3 for creating drop 
shadows, rounded corners, background effects, and gradients. Most of 
these effects could be accomplished visually with CSS2, but that would 
involve creating images and various bits of additional markup to apply 
them to elements. The CSS3 approach removes the need for extra 
markup and additional requests to the server and is easily adaptable to 
the content —you don't need to re-create your background image Just 
because you decide to make an element 20 pixels wider. 


C953 ISN'T JUST FOR VISUAL EFFECTS AND BACKGROUND IMAGES; IT ALSO 
INCLUDES SEVERAL NEW FEATURES FOR THE FORMATTING AND DISPLAY OF TEXT. IN 
THE NEXT CHAPTER YOU'LL LEARN ABOUT USING CUSTOM FONTS, AUTOMATICALLY ^. 
FORMATTING TEXT INTO COLUMNS, AND ADVANCED FONT CONTROL FEATURES. 
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This chapter covers 


* Adding custom fonte to your pages with @font-face 
* Detailed control of tont rendering with font-feature-settings 
• Improving readability with C55 columns 


• Controlling text wrapping and overflow 


Despite being designed from the start as a way to share text documents, 
the web has traditionally had poor typography. In this chapter, you'll 
learn how all that is changing as CSS3 brings in many new features for 
control of fonts and text. 


USER FRIENDLY by J.D. "Illiad" Frazer 


I'VE HEARD THAT WE'RE ON THE I CANT BELIEVE ANYONE 


WOULD CHOOSE TO SULLY MY 
MAC WITH ARIAL! 


THERE ARE BAD PEOPLE OUT ON 
THE WEB. 


COPYRIGHT Є 2004 2.0, “Hind” Frazer KTTP:/ /WWW.USCRFRIUNDLY.ORG/ 
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Basic web fonts 


Typography, the art of setting and arranging type, is a big part of design; 
a particular typeface is often as much a part of a company’s image as its 
logo or corporate color scheme. But in CSS2, there’s basically no way 
to specify a font that will be used by all users across all browsers and 
operating systems. 


Typography on the web has always been limited because of its client- 
server design —the font has to be on the client machine, where the ren- 
dering is done, and not on the server. This is what leads to standard 
font-family declarations like this: 


IF ALL ELSE FAILS, USE THE 
DOES THE USER HAVE THIS DEFAULT SANS-SERIF FONT. 
FONT? IF SO, USE IT. 2 


font-family: Arial, Helvetica, sans-serif; 


OTHERWISE, DOES THE USER HAVE THIS E 
FONT? IF SO, USE IT INSTEAD. 


The idea is that Arial (a Microsoft font), Helvetica (the standard Apple 
font), and sans-serif will all look relatively similar —but is that true? 
Instead of specifying a set of fallbacks, let’s compare what each font by 
itself looks like in some different browsers. Here’s the standard CSS 
rule split into three: 


h1 { font-size: 32px; font-weight: bold; } 
div:nth-child(1) { font-family: Arial; } 
div:nth-child(2) { font-family: Helvetica; } 
div:nth-child(3) { font-family: sans-serif; } 


To see the results, let's use this simple bit of markup repeated three times: 
<аіу><һ1>Не11о! HTML5 and CSS3</h1></div> 


Here's what the three elements look like in Firefox on my laptop. As 
you can see, there's quite a variation in both size and thickness. 


Hello! Hello! Hello! 
HTML5 and HTML5 and HTML5 and 
CSS3 CSS3 CSS3 
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But that’s not the only interesting thing going on. Here’s the same page 
in Chrome on my laptop. All the fonts look the same! 


Hello! Hello! Hello! 
HTML5 and HTML5 and HTML5 and 
CSS3 CSS3 CSS3 


To add to the confusion, I'll now reveal that my Linux laptop has nei- 
ther the Arial nor the Helvetica font installed, which is more obvious in 
this screenshot of the same page in Opera. 


Hello! Hello! Hello! 
HTML5 and НТМІ 5 and HTML5 and 
CSS3 CSS3 CSS3 


Opera falls back to Bitstream Vera Sans for Arial but renders the 
browser default font— which is serif rather than sans-serif— for 
Helvetica. Chrome renders all three the same because it falls back to 
Bitstream Vera Sans for Arial and Helvetica and also uses it for the 
default sans. Firefox tries to use a font similar to the requested one, so 
it replaces Arial with Liberation Sans and Helvetica with Nimbus Sans 
L, and it uses Bitstream Vera Sans for the default sans font. You can 
try it on your own system with listing chll/font-comparitor.html. This 
shows that web authors have almost no control over what fonts end up 
being used in their pages. As you can imagine, that drives some design- 
ers nuts! It's one reason you've seen so many bad hacks over the years 
that replace text with images or Flash movies. But there's now a practi- 
cal standards-based alternative: @font—face. 


Gaining control of fonts with the @font-face rule 


The @font-face rule allows you to specify a font to be downloaded with 
the web page in the same way as markup, images, and script. Here's a 
basic declaration to download the Liberation Sans Bold font: 
Gfont-face { 


font-family: "Liberation Sans Bold"; 
src: url(LiberationSans-Bold.ttf) format("truetype"); 
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Browser support quick check: @font—face 


ecce 


Standard Prefixed 


THIS EXAMPLE HAS TWO PROPERTIES: 
4.0 _ font-family AND src. font-family 


IS А МАМЕ; ANY NAME WILL DO, 
ALTHOUGH IT WILL MAKE YOUR LIFE NS 
EASIER IF IT'S REPRESENTATIVE OF 

SA 


3.5 А THE ACTUAL FONT МАМЕ. src 
SPECIFIES A URL TO THE FONT FILE | 
AND A FILE FORMAT. | 
4.0 А 
10.0 Е 
3.1 А 


Here are the declarations for the other two fonts in the earlier example: 


Gfont-face { 
font-family: "Nimbus Sans L Bold"; 
src: url(NimbusSanL-Bold.ttf) format("truetype"); 
} 
Gfont-face { 
font-family: "Bitstream Vera Sans Bold"; 
src: url(VeraBd.ttf) format("truetype"); 
} 


Now that the downloadable fonts have been defined, you can reference 
them in CSS rules like any other font: 


h1 { font-size: 32px; font-weight: normal; } 
div:nth-child(1) { font-family: "Liberation Sans Bold"; } 
div:nth-child(2) { font-family: "Nimbus Sans L Bold"; } 
div:nth-child(3) { font-family: "Bitstream Vera Sans Bold"; } 


These rules lead to consistent results cross-browser (except, of course, 
Internet Explorer 8 and earlier). Try it for yourself with listing ch11/ 
font-face-1.html. 


Hello! Hello! Hello! 
HTML5 and HTML5 and HTML5 апа 
CSS3 CSS3 CSS3 
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Hello! Hello! Hello! 
HTML5 and HTML5 апа HTML5 and 
CSS3 CSS3 CSS3 

Hello! Hello! Hello! 
HTML5 and HTML5 and HTML5 and 
CSS3 CSS3 CSS3 


A SUBTLE DIFFERENCE YOU MAY HAVE NOTED 15 THAT THE ORIGINAL EXAMPLE USED A 
font-weight OF bold, BUT THE SECOND EXAMPLE USED A font-weight OF normal. THIS 
IS BECAUSE THE @font—face RULES EXPLICITLY SPECIFIED THE BOLD VERSIONS OF 
THE FONTS, BUT IT’S POSSIBLE TO HANDLE THAT DIRECTLY WITH font-face. 


| 


The browser has two options when bold text is needed: it can either use 
a bold version of the font if one is available or scale up the normal font 


to make it look bold. 


Let's start with some normal text Hello! HTML5 and CSS3 


using the Yanone Kaffeesatz font: 


<p>Hello! HTML5 and CSS3</p> 


Here's the CSS: 


Gfont-face { 

font-family: "Yanone Kaffeesatz"; 

src: url(YanoneKaffeesatz-Regular.otf) format("opentype"); 
} 
рї 

font-size: 32px; 

font-family: "Yanone Kaffeesatz"; 


Now add a couple of elements that Hello! HTML5 and CSS3 


will render as bold: 


<p>Hello! <strong>HTML5</strong> and 
<strong>CSS3</strong></p> 
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The browser doesn’t have a bold ver- 
sion of Kaffeesatz, so it adjusts the 
normal font to be thicker and wider. 


Add another @font-face declaration. Hello! HTML5 and (SS3 


Notice that it uses the same 
font-family name, but it has a differ- 
ent URL and specifies a font-weight: 


Gfont-face { 
font-family: 
"Yanone Kaffeesatz"; 
src: 
urL(CYanoneKaffeesatz—Bold. otf) 
formatC"opentype"); 
font-weight: bold; 


The browser is now using the bold version of the Yanone Kaffeesatz 
font for the bold text. This is more compact and more cleanly rendered 
than the standard version of the font automatically adjusted to be bold. 
The same approach also works for italics, but using font-style instead 
of font-weight. Unfortunately Kaffeesatz doesn’t have an italic variant, 
so this example uses the thin variant: 


Gfont-face { 
font-family: "Yanone Kaffeesatz"; 
src: url(YanoneKaffeesatz-Thin.otf) format("opentype"); 
font-style: italic; 

} 


With a minor adjustment to the HTML you can see three different 
fonts, all from the same family, in one paragraph: 


«p»Hello! Hello! HTML5 and CSS3 


<strong>HTML5</strong> and 
«em» CSS3«/em»«/p» 
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Font formats: EOT, TTF/OTF, and WOFF 


9 


| 


The @font-face rule was originally introduced in an early draft of the 
CSS2 spec, but it was dropped back in 1998, mostly because of the lack 


of fonts with licenses that allowed web distribution. 


TO OVERCOME THE RESIST ANCE OF THE FOUNDRIES, THE BROWSER MANUFACTURERS 
DEVELOPED THEIR OWN FONT FORMATS SPECIFICALLY FOR THE WEB: NETSCAPE. 
CAME UP WITH THE PORTABLE FONT RESOURCE FORMAT (PFR), NOW AS DEAD AS THE 
NETSCAPE BROWSER: AND MICROSOFT CREATED EMBEDDED OPENTYPE (EOT), WHICH 
IS STILL SUPPORTED IN ТЕ TODAY. NEITHER WAS SUCCESSFUL; FEW FONTS WERE 


\ EVER MADE AVAILABLE IN EITHER FORMAT. 


Since 1998, several things have changed: 


^ Bandwidth has increased to the point that including a 100-500 KB 
font file in your page seems less of a big deal. 


^ Font foundries now have the example of the music industry to learn 


from. 


' The rise of open source operating systems has led to the creation of 
several free but professional fonts funded by companies such as Red 


Hat, Canonical, and Google. 


^ Tools have improved to the point that it's now feasible for profes- 
sional font designers to produce free fonts in their spare time. 


In June 1998, Safari 5.1 was released with support for downloading 
TrueType/Open Type fonts (TTF/OTF) with @font-face in its desktop 
incarnation and SVG Web fonts, a format tied to the SVG specification, 
on mobile devices. Firefox added support with the release of 3.5 in 
June 2009, and a brave new world of web typography was born. 


Although several smaller font foundries jumped on the bandwagon and 
started making their fonts available with web-friendly licenses, the 
major ones still weren't keen to get involved. They wanted a font file 
format that couldn't be used as a desktop font. The answer is the new 
W3C Web Open Font Format (WOFF), which is being developed col- 
laboratively between browsers, vendors, font foundries, and the W3C. 
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Browser support for downloadable fonts 


The previous section mentioned several different font file formats, 
among them EOT, ТТЕ/ОТЕ WOFF, and SVG. The following table 
shows which of them are supported in various browsers today. 


Browser Support from Support of 
е 4 TTF, OTF, and SVG 
1 3.5 TTF and OTF only 
3.6 WOFF support added 
a 4.0 Embedded Open Type (EOT) only 
9.0 WOFF support added 
10.0 TTF, OTF, and SVG 
11.1 WOFF support added 
Ө 3.1 TTF, OTF, and SVG 
5.1 WOFF support added 
(desktop) 
Ө 3.1 SVG 
( 4.2 TTF and OTF support added 
iOS) 


For widest support across browsers, you need to provide your font in 


four different formats—assuming you can find fonts available in all 


four formats, or with a liberal enough license that you can convert the 


font between formats yourself. In addition, you have to worry about 
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various bugs in different browsers’ support of 6font-face (see the 
browser support section at the end of the chapter for details). 


THE PRACTICAL ASPECTS OF SUPPORTING FONTS CROSS-BROWSER AND CROSS-DEVICE 
GIVE YOU PLENTY TO WORRY ABOUT. FORTUNATELY, SEVERAL SERVICES HAVE ARISEN 
A ONLINE TO DO THAT THINKING FOR YOU; THE NEXT SECTION WILL LOOK AT THEM. 


Making your life easier with font services 


Rather than search through many different web sites to find the exact 
fonts you want, and then purchase them from several different web- 
sites and figure out how to set up your server to deliver them correctly 
to clients and integrate everything into your CSS, it’s much easier to get 
someone else to do that for you. Many online services have appeared in 
recent years to simplify getting the fonts you want on your website. 
These can be broken down into three broad categories: 


^ Font converters and packagers — These services convert fonts you 
already have into the formats supported by browsers and provide 
you with CSS to incorporate them into your site. You have to deal 
with the server-setup side of things yourself. 


© Free font services —The font services deliver the fonts directly from 
their own servers, and all you need to do is link to a CSS file pro- 
vided by the service. Being free, these services only include freely 
downloadable and open source fonts. 


© Paid font services — These services are just like free ones except that, 
because you're paying license fees, the range of fonts available is 
vastly improved. 

This section walks through one example of each type of service listed, 

from choosing fonts to getting them on your web page. 


Downloadable kite: FontSquirrel 


FontSquirrel (www.fontsquirrel.com) is an online tool for building 
packages of font files. These packages contain everything you need to 
use the fonts on your own website. Here’s how to use FontSquirrel: 
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Go to the website home page and 
click the @font-face Kits link in 


the main menu. 


You'll be taken to a page that lists 
hundreds of fonts available for 
download. Scroll down to the 
Serif section, and find the 
Gentium Pro font. Click View 
Font to see the details. 


On the details page, you can see 
what each character looks like 
and try out text of your own. Go 
to the @font-face Kit tab to select 
which font file types you want to 
use: TTF, EOT, WOFF, and SVG. 


On this page you can also select a 
subset of the characters —so you 
only download the English char- 


acters if you won't be using any 


Hammerhead Аав мкм) АаВь Impe 


VENIIVN PAFIL 
СОРА 
pec me 


@font-face Kit 


Test Orive 


Choose a Subset 
English 
Choose Font Formats: 


Er Seor мяг 9 svo 


O Download @font-face Kit 


Character Map © (же 


Sieg View machot Gamo tere 


Subsetting 


Download Gentium Basic in TrueType format: 


бегене Basic Family (АЯ 8 styses) 


Gentium Basic Regular AaBbCcDdEeFfGgHhlifjKkLIMmNnOoPE 


Choose a Subset: 


English 


ij 


MacRoman (Western Languages) x 


Don't Subset 


=a 


b " " 
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other languages, keeping the file 


size down. 


Click the Download @font-face 
Kit button to download a zip file 
of everything you'll need. 


Look in the zip file you’ve down- 
loaded. It contains the following: 


Each font in the formats you 
selected 


A style-sheet file that you can 
include directly in your pages 


A web page demonstrating the 
font 


Here's a rule from the included stylesheet.css file: 


Qfont-face { 
font-family: 
src: 
src: 


Gentium- Basic топ асек їр 
Archive Edit View Help 


7 open ~ Etat è e 


Name 
©) demo.htm! 
. | GenBasB-webfont.eot 
Рё GenBasB-webfont.svg 
8) GenBasB-webfont.ttf 
_) GenBasB-webfont.woff 
_  GenBasBI-webfont eot 
IS GenBasBI-webfont.svg 
8) GenBasBI-webfont.ttf 
.j GenBasBI-webfont.woff 
GenBasi-webfont.eot 
E GenBasl-webfont.svg 
8) GenBasl-webfont.ttf 
|_| GenBasl-webfont.woff 
.., GenBasR-webfont.eot 


Location: @/ 

v Size 
5.2 KB 
42.3 KB 
63.7 KB 
42.1 КВ 
27.4 KB 
Мока 
71.6 KB 
49.5 KB 
31.4 KB 
51.4 KB 
71.1 KB 
51.2 KB 
31.9 KB 
41.1KB 


Type 

HTML docu 
unknown 
SVG image 
TrueType font 
unknown 
unknown 
SVG image 
TrueType font 
unknown 
unknown 
SVG image 
TrueType font 
unknown 


unknown 


35 objects (1.5 MB) 


'GentiumBasicRegular'; 
url('GenBasR-webfont.eot'); 
url('GenBasR-webfont.eot?iefix') format('eot'), 


url('GenBasR-webfont.woff') format('woff'), 
url('GenBasR-webfont.ttf') format('truetype'), 
url('GenBasR-webfont.svg£webfontLblSsz10') format('svg'); 


font-weight: normal; 
font-style: normal; 


And here's a rule from the 
HTML file, demonstrating how it 
should be used: 


p.stylel { 
font: 18px/27px 
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2 


'GentiumBasicRegular', 
Arial, 
sans-serif; 
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Font-face Demo for the Gentium 
Basic Font 


Gentium Basic Regular - Loren 


You can see the file in ch1 1/Gentium-Basic-fontfacekit/demo.html. 


Downloading a kit with everything you need takes a lot of the work out 


of things, but you still have to deal with serving the files yourself. This 


means you have to make sure your server is configured correctly for 


the font files. In addition, the users downloading the fonts will be using 


up your bandwidth. Wouldn't it be nice if someone else took care of the 


server-side stuff for you? Well, Google is offering to do it for free! 


The Google Web Fonts service is 
available at www.google.com/ 


webfonts. Click the Start Choos- 
ing Fonts button to begin. 


Like many Google services, the 
interface is search based. Search 
for a font called Crimson Text by 
typing in the Search box. 


& sea — k & 
& e чч z k 8 
кта 
& & v ox ' = E - & & 


Google web fonts @ semt nues 


wen ИУ 
Showing 
1 Preview Text Grumpy wizards make toxi = Sve 28 e 


font families 
tanum Grumpy wizards make toxic brew fo 


Crimson Text. 6 Styles by * see 
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The See All Styles link lets you SS 
see all the different weights and 
styles available. Click the Quick 
Use link alongside that. 


Grumpy wizards make toxic brew for the evil Queen and Jack. 
Grumpy wizards make toxic brew for the evil Queen and Jack. 


Grumpy wizards make toxic brew for the evil Queen and Jack. 


Feuman udeacde make tavis hran fae the all haan aed lack 

You can select which font variants 1. Choose the styles you want: 
you want to include (weights of © Crimson Text 
bold and/or italics). To the right № Normal 400 
of the selection is a large graphic ЕММА 
SET : Г) Semi-Bold 600 
indicator that estimates the m 
Й , LJ Semi-Bold 600 italic 
impact of the fonts you ve chosen 5 

"aie Z) Bold 700 
on page load time. C) Bald 700 ilic 


Instead of a download, you're 
offered two snippets of code to 


copy and paste. Scroll down the 


«linh hrefs*http: //fents.googleapis. con/css?funL1ysCrimsoneText 400, 708" rels'aty, 


page to find them. 


The first bit of code is a <link> ele- 
ment to include in your document 


font-family: "Crimson Text’, serif; 


head. The second is an example 
CSS rule making use of the font. 


The exact code is as follows: 


«link 
href='http:// 
fonts.googleapis.com/ 
css?family=Crimson+Text: 400, 700' 
rel='stylesheet' type='text/ 


css'> 

font-family: 'Crimson Text', 

serif; 

Include these two snippets in Hello! HTMLS and CSS3 

your page adjusting the CSS rule Many persons who are not conversant with mathematical studies imagine that because the 
d , d business of [Babbage's Analytical Engine] is to give its results in numerical notation, the 

as necessary, and you re good to nature of its processes must consequently be arithmetical and namsericl, aber than 

algebraical and analytical. This is an error. The engine can arrange and combine its 
go : numerical quantities exactly as if they were letters or any other general symbols; and in 


fact it might bring out its results in algebraical notation, were provisions made accordingly. 
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See the full example listing in ch1 1/fontservices-google.html. 


Subscription font services: Fontdeck 
The Google service is straightforward and available at an excellent 
price —nothing — but this strength is also a weakness. Google can only 
offer free fonts for download through its service. If the fonts you want 
to use aren't available, you'll have to look into one of the subscription 
services; several such services are now available. 


(http://fontdeck.com/) because it 


1 This example looks at Fontdeck 
allows you to try the fonts for free 


and I already have an account. 


Z You need to provide an email 


address to register, and then you 


set up a website. This is as simple 
as typing in a name and one or Your Account 


more domain names. ES send coriis ОООО Сэм ES 


The first 20 distinct IP addresses re 
to access your website will be 
allowed to download any fonts 
you choose free of charge, So you 
can use Fontdeck to test fonts and 
even demonstrate them to clients 
without financial outlay. 


3 After you've set upa website, you 


need to choose some fonts. These 
are arranged by category — serif, 


sans-serif, and so on —or you can 
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search by font name or tag. For 
this example, look for Monosten, 
which is under Slab Serif > 
Monospaced. Either browse to 
the font or search for it. 


On the page for Monosten, look 
for the A (regular) and C (bold) 
variants and click the Add to 
Website link alongside them. 


You should see a banner at the 
top of the page with a link that 
says Grab the Code for This 
Font —go ahead and click it. 


You're presented with a page that 
has code you can copy and paste 
into your pages. The code I got is 
shown next; I changed the CSS 
slightly to apply to the body and 


level-one headings. 


FONT 
DECK кез 


Browse Fonts 


A oA Abo 
Add to website 
uiche 
^ Monosten A has been added to the ‘Hello! HTMLS and CSS3 example’ website. 
View esha muss et Qni Du code tr whi teen 


<link rel="stylesheet" href="http://f.fontdeck.com/s/css/ 
9tuWCgd-qpLZNXRFuo1XneWWj NE/www . dotrob.com/8881.css" 


type-"text/css" /» 
«style» 
body { 


font-family:'"Monosten A", Courier, monospace; 


font-size-adjust:0.5; 
font-weight:normal; 
font-style:normal; 
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font-family:'"Monosten C", Courier, monospace; 


font-size-adjust:0.5; 
font-weight:bold; 
font-style:normal; 


} 
</style> 


Here’s my example page in action 
7 using the previous code. See the 
full listing in ch1 1/fontservices- 
fontdeck.html. You'll need to edit 
the example file to insert your 
own style sheet link to Fontdeck; 
otherwise you won't be able to 


download the fonts. 
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ясаа шар MALIA fetes = ER | 


Firefox v. | e FontDeck Example * 


- Зо об. com EE a g- 


Hello! HTMLS5 and CSS3 


Hany persons who оге not conversont with mothemoticol studies imagine 
thot becouse the business of [Bobboge's Anolyticol Engine] is to give 
its resu 


in numericol nototion, the noture of its processes must 
be orithseti ather thon olgebroicol 
ol. This is o 
its numericol quontities exoctly os if E 
general symbols; ond in foct it might bring out its results in 
algebraical notation, were provisions mode accordingly 


Even with a working 6font-face directive, control over fonts on the 


web is still far behind what you might see in a typical desktop-publish- 


ing program or design package. CSS3 goes beyond letting web devel- 


opers control which fonts appear on their web pages: it also offers 
features for controlling the details of how those fonts are rendered. 


font-size-adjust 
As you saw earlier, one of the issues 
with fonts on the web is that, should 
the primary font be unusable for 
some reason, the fallback font may 
have different size characteristics. 
Fonts that are nominally of the same 
size can have visible differences in 
weight; this is the case because the 
measure of a font depends on the 
height of the letters including any 


Standard Prefixed 


I" 3 
$5 
ERES 
ab 3.0 Ж 
* 
ON 
Qo 
Ed 
241 @ : А 
„© 
ФО 
Шр 
565 
=o - - 
mc 
o 
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potential ascenders and descenders, whereas the visual size of the font is 
more dependent on the x-height — the size of the lowercase characters. 


The font size in all three examples in the section 20px 
“Basic web fonts” was set to 32 pixels. But as you 15px 

А А А А А 10рх 
can see in this magnified view of the Nimbus Sans L 5рх 


letter M, the characters аге only about 24 pixels tall. 


Following is a diagram showing how the various 
font size metrics are related. 


<< Dust Puppy?» 


S 


The font-size-adjust property allows you to specify a ratio between the 
x-height and the size of your first-choice font. If the browser has to use 
one of the fallback fonts, it will automatically adjust the size so the 
x-height remains consistent. 


You don't have to work out the x-height exactly; you can discover an 
appropriate value through trial and error instead. If you provide a 
"wrong" value for font-size-adjust, the font will be noticeably smaller. 
Following is an example that shows the difference that specifying font- 
size-adjust can make. To begin, let's look at what happens without that 
property: 
pf 

font-size: 32px; 


padding: 0.5em; 
font-family: "Yanone Kaffeesatz", sans-serif; 


If the font is available, then every- Hello! HTML5 and CSS3 
thing is fine. 


But if the font isn't available for Hello! HTML5 and CSS3 


some reason, the fallback font 
takes up considerably more space. 
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Now let's add a font-size-adjust property: 


рї 
font-size: 32px; 
padding: 0.5em; 
font-family: "Yanone Kaffeesatz", sans-serif; 
font-size-adjust:0.5; 
} 
Again, everything is fine if the Hello! HTML5 and С553 


font is available. 


But this time, if the font isn’t Hello! HTML5 and CSS3 
available, the fallback font takes 


up a similar height. 


Note that font-size-adjust only impacts the x-height—the width is still 
different. The property's main advantage is that it preserves the verti- 
cal rhythm of your blocks of text. 


Advanced font control e NE 


This section looks at some of the 
advanced features offered by mod- x 16" 
ern fonts and how they can be con- 
trolled from CSS. We'll start with 


ligatures: the replacement of 
sequences of separate characters 


font features 
> 
© 


with a single, joined glyph (the typo- 


graphical term for the elements of a 


Browser support quick check: 


font) and then explore some fea- 
tures available for numbers before 


finishing with fancy text options 


known as contextual swashes. * (Win/Linux only) 


CSS DOESN'T CREATE ADDITIONAL GLYPHS—THEY HAVE ТО BE PRESENT 


ALL OF THESE FEATLIRES ARE ATTRIBUTES OF THE FONT BEING LISED. 
IN THE FONT—BLIT IT LETS YOU CONTROL WHEN THEY'RE USED. 
SA 


1 
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Glyphs and ligatures 


Glyph is the typographical term for the graphical elements that make up a font. 
It differs from a letter—any individual letter can be represented by any one of a 
number of glyphs in a font depending on the context in which it's placed. A com- 
mon example in old English was the long s and short s forms that were used at 
the start and end of words, respectively—both represented the letter but usea 
different glyph. 


A ligature is a glyph that replaces a sequence of letters. In traditional English 
printing, this was generally used to increase legibility or to work around limita- 
tions of ink or lead type. But in some scripts, the particular ligature used can af- 
fect the meaning. 


Ligatures are a feature of the font being used. Each font has a replacement table 
that maps certain sequences of characters in the text to single glyph. 


Following are some example ligatures from the Calluna Regular font. 


== fffüifl ЖЕ 
Ligatures (T G f1 (fh ff] 


Currently, Firefox and Safari render ligatures automatically, if they’re 
available in the font, above a certain font size. CSS3 gives you complete 
control over them through the font-feature-settings property. The 
property requires a single value: a quoted string containing a comma- 
separated list of font settings. To turn on ligatures, you use this CSS: 


font-feature-settings: "liga"; 


All the features have a four-character code. If the value is present, it 
means the feature is enabled. It's also possible to add a value to each 
feature: 


font-feature-settings: "liga" 1; 


A value of 1 or on means the feature is enabled, and 0 or off means the 
feature is disabled. The complete list of possible features is available in 
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the OpenType specification: www.microsoft.com/typography/otspec/ 
featurelist.htm.In addition to the regular ligatures, a font may also have 
a set of more decorative discretionary ligatures. These aren’t enabled 
by default but can be enabled through font-feature-settings. Here’s 
another example from the Calluna Regular font. 


it qu st ct 
Discretionary ligatures it qu St ct 


As you can see, the discretionary ligatures are a lot more decorative. 


Normal ligatures 


You would normally only enable them for headings or other small sec- 
tions of text with a decorative as well as informative role. The CSS for 
the second line in the previous example is this: 


font-feature-settings: "liga" 1, "dlig"; 
It's also possible to select only the additional ligatures: 


font-feature-settings: "liga" 0, "dlig"; 


Letters aren't the only thing that can be 876 2I 
represented by more than one glyph in a 9079543 
font, and you may have good reason for IIIIIIIIII 
wanting different glyphs in different situ- 

ations. This screenshot shows four num- 23232325 


bers in the Calluna font with the default I 23456789 
rendering. Can you quickly tell which 


one of the four is the largest value? 


The problem with the normal rendering 8 6 2I 
of numbers is that, like the rest of the 9 7 545 

text, they're proportionally spaced. This 1111111111 
is fine for numbers in text but not so 2 3 2 3 2 3 2 3 


good for quick visual comparison in 


tables. The Calluna font has several I2 3 4 5 6789 
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different sets of numerals, and in this 
case the tabular set is more useful: 


font-feature-settings: "tnum"; 


Now you can see immediately that the 
largest value number is the second one. 


The numbers in the previous examples 
are designed to look natural when used 
in a paragraph of text, with ascenders 
and descenders like regular letters. You 
may prefer to have the numbers be a 
more consistent height; these are known 


as lining numerals: 
font-feature-settings: "lnum"; 


The default that's being overridden here 
is Old Style Numerals, which can be 


selected with the short code "onum". 


Calluna allows you to combine the tabu- 
lar and lining properties: 


font-feature-settings: 
"tnum" : "lnum" ; 


Calluna also has a special set of ligatures 
for fractions: 


font-feature-settings: "frac"; 


The column on the left is the normal ren- 
dering of the text; the fractions are typed 
with a slash as in 1/2. The column on the 
right has fractions turned on; the three 
letters have been replaced with a single 
glyph representing the fraction. 
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987654321 
1111111111 
23232323 

123456789 


987654321 
1111111111 


23232323 


123456789 


I I/2 
2 1/3 
3 1/4 
4 3/5 


Il 
2% 
3% 
4% 


It's often difficult to distinguish an 
uppercase letter O from a zero. In fonts 
used in things like text editors, the zero 
will have a slash through it to make it 
more distinctive. Calluna has both a reg- 
ular and a slashed zero. The slashed zero 
can be enabled with the zero feature: 


font-feature-settings: "zero"; 


Historical forms can give an authentic 
old look to your text. For instance, in 
days of yore, the current form for s was 
only used at the end of words. It was nor- 
mal to use a long s at the start and in the 
middle of words. You can enable the long 
sin Calluna with the nist feature: 


font-feature-settings: "hist"; 


Fonts can also contain stylistic alter- 
nates — usually more decorative versions 
of certain characters. Calluna has just 
one set of stylistic alternates, which con- 
tains only two glyphs. Turn on stylistic 
alternates by setting salt to on: 


font-feature-settings: "salt"; 
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000000 
O00000 


succession 
fucceffion 


& OO &@ 


The Calluna font used so far for the examples doesn’t have much in the 


way of historical forms or stylistic alternatives. Let’s switch to the 
MEgalopolis Extra font, which has plenty of both. 


Here’s a sample paragraph THE ANALYTICAL ENGINE HAS NO PRETENSIONS WHATEVER 


with no special typographic 
formatting. The code fol- 
lows. 
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we know how to order it to perform. 
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I again rely on Ada Lovelace for the quote: 


<p>The Analytical Engine has no pretensions whatever to 
originate anything. 
It can do whatever we know how to order it to perform. </p> 


Here’s the CSS to apply the font: 


Gfont-face { 
font-family: megalopolis; 
src: url(MEgalopolisExtra.woff) format C"woff"), 
url(MEgalopolisExtra.otf) format("opentype"); 
} 
рї 
font-family: megalopolis, sans-serif; 
} 
p::first-line { 
font-variant: small-caps; 


j 


You can see the additional ligatures in effect on the small-caps combi- 


nations ca, re, and at. 


Additional ligatures Tre ANALYTIGL ENGINE HAS NO PREENSIONS WHREVER TO 
originate anything. It can do whatever we 
know hou to order it to perform. 


Additional ligatures plus THe ANALYTIGL ENGINE HAS NO PRETENSIONS WHREVER TO 
elt Get alternati originate anything. It can do whatever we 
CRATE SLY OE aernauves know how to order it to perform. 


The default stylistic alternatives adds a more curvy v but also a more 
traditional y. The property for the second example is as follows: 


font-feature-settings: "salt","dlig"; 


MEgalopolis has six other style sets, which can be turned on with 5501 
to ss06. Here are a couple of examples. If you're following along at 
home, I suggest you try ss06 for yourself: 


"5501" THE ANALYTIGL ENGINE HAS NO PRETENSIONS WHAEVER TO 
originate anything. It can do whatever we 
know how to order it to perform. 


www.it-ebooks.info 


CZ 


"5505" 


BROWSER SUPPORT 
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Tre ANALYTIGL ENGINE HAS NO PREENSIONS WHAEVER TO 
originate’ anything. It. can. do” whatever” 
wer know how to order it. to” perform. 


Recent versions of the major browsers support some parts of CSS3 


advanced font control features using vendor-specific extensions. The 


following example shows a complete code listing that enables standard 


and discretionary ligatures cross-browser: 


-moz-font-feature-settings: "liga", "dlig"; 
-moz-font-feature-settings: "liga-1, dlig-1"; 
-ms-font-feature-settings: "liga", "4119"; 
-webkit-font-feature-settings: "liga", "4119"; 
font-feature-settings: "liga", "dlig"; 


NOTE THAT FIREFOX SLIPPORTED AN OLDER VERSION OF THE SPEC FROM 
VERSION 4 ONWARDS. IT SUPPORTS THE CURRENT SYNTAX FROM VERSION 14 
ONWARDS. IN ORDER TO SLIPPORT BOTH OLD AND NEW FIREFOX, YOLI MLIST PLIT 
THE OLD SYNTAX SECOND. NEWER VERSIONS WILL IGNORE THE OLD SYNTAX, 
BUT THE OLD VERSIONS WILL ATTEMPT TO APPLY THE NEW SYNTAX AND FAIL. 


THE font-feature-settings PROPERTY IS INTENDED TO BE СА 
USED ONLY FOR LOW-LEVEL CONTROL. THE FINAL STANDARD WILL 
INCLUDE MORE READABLE VERSIONS FOR ALL THE MOST COMMON 
OPTIONS. THE FOLLOWING TABLE INDICATES HOW THE PREVIOUS 
EXAMPLES MAP ONTO THE PROPERTIES CURRENTLY IN THE SPEC. 


font-feature-settings 


Standard CSS3 properties and values 


font-feature-settings: 
"liga"; 


font-feature-settings: 
"liga" 0, 
dlig"; 


font-feature-settings: 
"tnum"; 


font-feature-settings: 
"tnum", 
"lnum"; 


font-variant-ligatures: 
common-ligatures; 


font-variant-ligatures: 
no-common-ligatures 
additional-ligatures; 


font-variant-numeric: 
tabular-nums; 


font-variant-numeric: 
tabular-nums 
lining-nums; 
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(continued) 


Text and fonts 


font-feature-settings Standard CSS3 properties and values 


font-feature-settings: 


"frac"; 


font-feature-settings: 


"hist"; 


font-feature-settings: 


"5501"; 


font-variant-numeric: 
diagonal-fractions; 


font-variant-alternates: 
historical-forms; 


font-variant-alternates: 
styleset(1); 


Text columns 


Standard | Prefixed 
;0 |" 
o 
Ф 
= 
о 
Re" 
E 
re 
о 
не m | - 
30 
о 
: O 
o 11.10 - 
5 
m 

ө" 


Column count and width 


Columns in printed media, such as newspa- 
pers and magazines, make text easier to read 
by keeping the line length to an optimal 10— 
15 words. With CSS2, the only way to create 
columns of text is to split the content among 
multiple elements and then position them on 
the page. This causes issues when updating 
the content, because you have to make sure 
it remains balanced, and when reading it, 
because nothing in the markup indicates that 
the two elements share a common text 
source. CSS3 adds the ability to render any 
element across multiple columns, solving 
both issues. You'll learn how in this section. 


I NEVER AM REALLY SATISFIED THAT І UNDERSTAND ANYTHING: 


Here’s a simple page with a couple Ppp eelp RENIY rl Lenk TT СЕЕН ATIDI 


of paragraphs of text: 


<body> 


<p>I never am really 
satisfied. ..</p> 

<p>In almost every 
computation. . . </р> 


</body> 


ONLY BE AN INFINITESIMAL FRACTION OF ALL I WANT TO 
UNDERSTAND ABOUT THE MANY CONNECTIONS AND RELATIONS WHICH 
OCCUR TO МЕ. HOW THE MATTER IN QUESTION WAS FIRST THOUGHT 
OF OR ARRIVED AT, ETC, ETC. 


IN ALMOST EVERY COMPUTATION A GREAT VARIETY OF 
ARRANGEMENTS FOR THE SUCCESSION OF THE PROCESSES IS 
POSSIBLE. AND VARIOUS CONSIDERATIONS MUST INFLUENCE THE 
SELECTIONS AMONGST THEM FOR THE PURPOSES OF A CALCULATING 
ENGINE. ONE ESSENTIAL OBJECT IS TO CHOOSE THAT ARRANGEMENT 
WHICH SHALL TEND TO REDUCE TO A MINIMUM THE TIME NECESSARY 
FOR COMPLET ING THE CALCULATION 
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Turning that into two columns of 
text is straightforward: 
body { 


column-count: 2; 


} 


The text flows naturally into two 
columns with no markup changes, 
as you can see in the screenshot. 


An alternative approach is to spec- 
ify a column width: 
body { 


column-width: 260px; 
} 


With a window 640 pixels wide, as 
in this example, and taking into 
account page margins and padding, 
this has a result that’s identical to 
the previous rule. 
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I NEVER AM REALLY SATISFIED AGREAT VARIETY OF 
THAT І UNDERSTAND ANYTHING: ARRANGEMENTS FOR THE 
BECAUSE. UNDERSTAND IT WELL. SUCCESSION OF THE PROCESSES 
AS I MAY, MY COMPREHENSION CAN 15 POSSIBLE, AND VARIOUS 
ONLY BE AN INFINITESIMAL CONSIDERATIONS MUST 
FRACTION OF ALL I WANT TO INFLUENCE THE SELECTIONS 
UNDERSTAND ABOUT THE MANY AMONGST THEM FOR THE 
CONNECTIONS AND RELATIONS PURPOSES OF A CALCULATING 
WHICH OCCUR TO МЕ, HOW THE — ENGINE. ONE ESSENTIAL OBJECT 
MATTER IN QUESTION WAS FIRST 15 ТО CHOOSE THAT 
THOUGHT OF OR ARRIVED AT, ETC, ARRANGEMENT WHICH SHALL TEND 
ETC. TO REDUCE TO A MINIMUM THE 

TIME NECESSARY FOR 
IN ALMOST EVERY COMPUTATION COMPLETING THE CALCULATION. 
INEVER AM REALLY SATISFIED AGREAT VARIETY OF 
THAT X UNDERSTAND ANYTHING: ARRANGEMENTS FOR THE 
BECAUSE, UNDERSTAND IT WELL SUCCESSION OF THE PROCESSES 
AS I MAY, MY COMPREHENSION CAN 15 POSSIBLE. AND VARIOUS 
ONLY BE AN INFINITESIMAL CONSIDERAT IONS MUST 
FRACTION OF ALL Т WANT TO INFLUENCE THE SELECTIONS 
UNDERSTAND ABOUT THE MANY AMONGST THEM FOR THE 
CONNECTIONS AND RELATIONS PURPOSES OF A CALCULAT ING 
WHICH OCCUR TO ME. HOW THE ENGINE. ONE ESSENTIAL OBJECT 
MATTER IN QUESTION WAS FIRST 15 ТО CHOOSE THAT 
THOUGHT OF OR ARRIVED AT. ETC. SHALL TEND 
ETC. TO REDUCE TO A MINIMUM THE 
TIME NECESSARY Fi 


IN ALMOST EVERY COMPUTATION 


'OR 
COMPLETING THE CALCULATION. 


The difference between the two becomes obvious if the browser win- 


dow is wider. Here are the same two pages at 1024-pixel width. 


IMEVER AM REALLY SATISFIED THAT ILMDERSTAND —— ARRANGEMENTS FOR THE SUCCESSION OF THE 
ARTO 


МЕ. HOW THE MAT TER IN GUEST LON WAS FIRST 
THOUGHT OF OR ARRIVED AT. ETC ETC 


їм ALMOST EVERY COMPUTATION A GREAT VARIETY OF 


column-count: 2 at 1024px width 


ere 


t: 
ІМ ALMOST EVERY COMPUTATION A 


MATTER IN GUEST LON WAS FIRST 
THOUGHT OF OR ARRIVED AT. ETĊ 


NECESSARY 
COMPLETING THE CALCULAT TON. 


column-width: 260px at 1024px width 


NOTE THAT NONE OF THE COLLIMNS SHOWN IS EXACTLY 260 PIXELS WIDE. 1 


THE COLUMNS WILL ADJUST THEIR WIDTH SO THEY USE THE ENTIRE 
HORIZONTAL SPACE AVAILABLE. IF YOU WANT COLUMNS OF AN EXACT WIDTH, — 
YOU SHOULD PUT THEM IN AN APPROPRIATELY SIZED CONTAINER ELEMENT. 
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Column spans 
You don’t always want everything to fit neatly into columns. You may 
sometimes want an individual element to span multiple columns. For 
example, in newspapers it’s common for photographs to span multiple 
columns of text. 


Inserting an element in the text TEE E ОИ Т: 
d ) d fi l l petere dero reet THOUGHT OF OR ARRIVED AT. ETC, 
id iY. MY COMPREHENSION CAN ETC. 
oesn t produce usetul results: тунш н сове 
FRACTION OF ALL I WANT TO ware н 
<p>I never am really satisfied that peer ad 


I understand anything; because, 
understand it well as I may, «img 
src="uf012314.gif">my comprehension 

can 
... </p> 


The image is 720 pixels wide, and 
the columns are 260 pixels wide. 
The result is that the image sticks 
out from its column and lies under- 
neath the text of the next column. 


1 NEVER AM REALLY SATISFIED ЕТС. 


One useful approach is to limit the ТИТ LUDERSTAO AUTEM gr EVERY COMPUTATION 
. . COMPREHENS: AGREAT VARIETY 
width of any images. When columns Ор i ARRANGEMENTS FOR THE 
. * А FRACTION OF ALL I WANT ТО TERES 
are in use, a width of 10096 applies LRDERSTANDABOUT THE МАТ CONSIDERATIONS MIST 
A wen INFLUENCE THE SELECTIONS 
to the width of the column rather MONET THENFORTHE о 
2 ENGINE. ONE ESSENTIAL OBJECT 


CONNECTIONS AND RELATIONS 15 ТО CHOOSE THAT 
WHICH OCCUR TO ME, HOW THE ARRANGEMENT WHICH SHALL TEND 


than the width of the page: 


MATTER IN QUESTION WAS FIRST TO REDUCE TO A MINIMUM THE 
img { THOUGHT OF OR ARRIVED AT. ETC, TIME NECESSARY FOR 


COMPLETING THE CALCULAT ION. 
max-width: 100%; 


} 


But for pictures that are far wider 
than they are high, the result may be 
that the image is too small. We need 
а way for an element to take up 
100% of the page width and have 
the text columns flow around it. 
This 1s what column-span is for. 
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In the current CSS3 Multi-column 
spec, the column-span property can 
take one of two values: 1 or all. The 
default is 1: elements span a single 
column. A value of all makes the 
element span every column: 
img { 

max-width: 100%; 

column-span: all; 


Gaps and rules 


The column-gap property allows you 
to control the spacing between col- 


umns: 


body { 
column-width: 200px; 
column-gap: 100px; 


Three properties control the column 
rule. This example shows all three of 
them: 


body { 
column-width: 200px; 
column-gap: 100px; 
column-rule-style: solid; 
column-rule-color: #999; 
column-rule-width: 20px; 


} 


Note that these are analogous to the 
border properties. 


Rather than specify the three prop- 
erties individually, you can use a 


Text columns 


І NEVER AM REALLY SATISFIED 
THAT І UNDERSTAND ANYTHING: 
BECAUSE. UNDERSTAND IT WELL 
AS I MAY. MY COMPREHENSION CAN 
E^ 


419 


ONLY BE AN INFINITESIMAL 
FRACTION OF ALL I WANT TO 
UNDERSTAND ABOUT THE MANY 


WHICH OCCUR TO ME. HOW THE. 
MATTER IN QUESTION WAS FIRST 
THOUGHT OF OR ARRIVED AT. 
ETC. ETC. 


IN ALMOST EVERY COMPUT AT ION 


RELAT IONS WHICH OCCUR. 
TO ME, HOW THE MATTER IN 
QUESTION WAS FIRS 
THOUGHT OF OR ARRIVED AT. 
ETC. ETC. 


IN ALMOST EVERY 


TO ME. HOW THE MATTER IN 
QUESTION WAS FIRST 
THOUGHT OF OR ARRIVED AT, 
ETC. ETC. 


ІМ ALMOST EVERY 
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INFLUENCE THE SELECT IONS 
AMONGST THEM FOR THE 


WHICH SHALL TEND 
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1 NEVER AM REALLY ! — COMPUTATION A GREAT 
shorthand version to set all three at TIFO TATE б VAETETY OE МЕНИБИ 
UNDERSTAND ANYTHING: 1 FOR THE SUCCESSION OF 
once: BECAUSE. UNDERSTAND ТТ 1 THE PROCESSES 15 
WELL AS I MAY, MY 1 POSSIBLE. AND VARIOUS 
COMPREHENSION CAN ONLY 1 CONSIDERATIONS MUST 
body { BE AN INFINITESIMAL 1 INFLUENCE THE 
ody FRACTION OF ALL I WANT ı SELECTIONS AMONGST THEM 
А TO UNDERSTAND ABOUT THE FOR THE PURPOSES OF A 
column-width: 200px; MANY CONNECTIONS AND ! CALCULATING ENGINE. ONE 
RELATIONS WHICH OCCUR ! — ESSENTIAL OBJECT I$ TO 
column-gap: 100px; TO ME, HOW THE MATTER IN ! CHOOSE THAT ARRANGEMENT 
QUESTION WAS FIRST р WHICH SHALL TEND TO 
= : . THOUGHT OF OR ARRIVED AT. REDUCE TO A MINIMUM THE 
column-rule: 4px dashed £333; Tuos a 
} 1 COMPLETING THE 
IN ALMOST EVERY 1 CALCULATION 


NOTE THAT THE COLUMN RULE SITS WITHIN THE COLUMN GAP—INCREASING OR 
DECREASING THE WIDTH OF THE COLUMN RULE DOESN'T MOVE THE COLUMNS 
FARTHER APART OR CLOSER TOGETHER. YOU CAN EVEN HAVE THE COLUMN RULE 
EXTEND UNDERNEATH THE COLLIMNS, AS IN THE FOLLOWING EXAMPLE. 


SA 


In this example, the column rule INEVER AM RELY 


is wider than the column gap: BECAUSE. UNDERSTAND ТТ 


body { BE AN INFINITESIMAL 
column-width: 200px; TO UNDERSTAND ABOUT THE 


= . Ы RELATIONS WHICH OCCUR 
column-gap: 100px; RELATIONS эм ЙОД 


E 1 QUESTION WAS FIRST 
column-rule: 300px ridge mies ean 


#CCC; E ad 
} 


Wrapping and overflow 


Text wrapping has traditionally been something that, as a web author, 
you had to let the browser take care of. In situations where you'd like 
more control, CSS3 offers a couple of new properties: word-wrap and 
text-overflow. This section looks at each in turn. 


Word wrap 


CSS3 provides a word-wrap property that controls whether line breaks 
are allowed in the middle of words. Normally, text wrapping only 
occurs at spaces and punctuation. If a word is too long to fit inside the 
containing element without the opportunity for a break, then the ele- 
ment expands to contain it. 
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For regular paragraphs of text, this 
isn’t usually a problem. But it can be 
an issue for headings and URLs, par- 
ticularly if they’re in constrained- 
width containers such as sidebars or 
text columns. Imagine that you have 
a word-of-the-day feature in your 
The sidebar has a 
width of 15em, which is normally 


site's. sidebar. 


plenty of room; but one day the 
word is a long one: 


«div» 
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Standard Prefixed 

o 
Ф 
< 
о 
E = Ө d i 
zE 
ti 
HO s |. 
Qo 
2 = 
S 
o 10.50 - 
z О 
2 
m 

Ө n | 


<h1>Floccinaucinihilipilification</h1> 
<p>The act or habit of describing or regarding 


something as unimportant. </p> 
</div> 


Even though the width of the ele- 
ment is constrained, the length of 
the word forces the entire con- 
tainer to be wider: 


div { width: 15em; } 


Note that the paragraph is still 
constrained by the width set. 


Here’s where you can use the 
word-wrap property. Setting a value 
of break-word allows wrapping to 
occur within the long word: 


div { width: 15em; } 
h1 { word-wrap: break-word; } 


1 
LI 
I 
LI 
LI 
' 
i 
' 
' 
LI 
' 
' 
' 
LI 
' 
I 
LI 
' 
' 
LI 
' 
' 
LI 
' 
LI 

E 


L 
FLOCCINAUCINIHILIPILIFICATION, 
L 


THE ACT OR HABIT OF 1 
DESCRIBING OR REGARDING 1 
SOMETHING AS 1 

L 


LI 
' 
LI 
I 
LI 
Lj 
| UNIMPORTANT. 


ı FLOCCINAUCI ' 
ı NIHILIPILIFI ' 
‚ CATION ! 
: THE ACT OR HABIT OF ! 
DESCRIBING OR REGARDING i 
! І 
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Text overflow 


It may be that you want to keep the word үт тте си нки ee 1 
on one line, so break-word isn’t appropri- | 

ate. A normal way to do this in CSS2 is to | FLOCCINAUCTM 
set the element to overflow: hidden.h1 { | —— 
[| 
І 
I 


overflow: hidden; } DESCRIBING OR REGARDING 
SOMETHING AS 
This works, but it doesn’t look tidy. The ORTANT: 
word is cut off part way through a letter. Anasazi ainia 2 
The text-overflow property lets you make E TOUT 1 
: П 
things look neater: | FLOCCINAUC... 
nli THE ACT OR HABIT OF Е 
overflow: hidden; ! DESCRIBING OR REGARDING | 
text-overflow: ellipsis; рны ! 
} | A 


Now the word ends at a letter, and an 
ellipsis gives a visual indication that the 
word has been truncated. This property is 
particularly useful if you're dealing with 
user-generated content that appears in 
constrained areas — for example, a Twitter 
feed in a sidebar. 


Standard Prefixed 
Ф 
de 
o 
ө > |. 
gt 
to 
2 
23 a 6.0 à 
a 
ad 
5" 
9 О 11.0 90 
5 
a 
e^" - 
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Browser support 


Support for downloadable fonts and WOFF is now available in all 
major browsers, but so far, the more advanced font-control features are 
available only in Firefox. In terms of other text features, the other 
browsers take the lead. 


©ecod®@ 
12 14 4 6 8 |9 |10 | 11.1 | 11.5 5 5.1 
Gfont-face e. ° ° ° o ° ° ° ° ° ° 
WOFF ° ° ° ° ° ° ° ° ° 
font-size- ° ° 
adjust 
Font features o o о 
CSS columns o o o o e. e. ° o o 
Column span o o o ° o 
word-wrap е e ° ° ° ° ° ° ° ° ° 
text-overflow ° ° ° ° ° ° ° ° ° 
Кеу: 


e Complete or nearly complete support 
o Incomplete or alternative support 
Little or no support 


Summary 


Text has always been a fundamental component of web content, but 
until recently control of typography has been somewhat limited. In this 
chapter, you've seen how @font-face can finally provide beautiful 
(while still accessible) text on the web, and how web font services can 
make it easier to get those fonts onto your web pages. You've also had a 
tour through the desktop-publishing-like font control capabilities CSS3 
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will give us in the future through font-feature-settings. And, continu- 
ing the publishing theme, you've seen the new features for controlling 
columns of text. Finally, you saw some CSS3 features for controlling 
text wrapping and overflow, which are useful when you're fitting con- 


tent into text columns and other narrow containers. 


THAT'S THE END OF THE BOOK, BUT HOPEFULLY JUST THE START OF YOUR JOURNEY 
WITH HTMLS AND CSS3. BOTH STANDARDS ARE EVOLVING AT А FASTER RATE THAN EVER 
BEFORE, OPENING NEW POSSIBILITIES FOR WEB AUTHORS EVERY MONTH. IT’S AN 
EXCITING TIME TO BE INVOLVED WITH THE WEB: ALL OF US HERE AT COLUMBIA 
INTERNET (AND OUR FRIENDS AT MANNING PLIBLICAT IONS) HOPE YOU CAN TAKE THE 
KNOWLEDGE YOU'VE GAINED FROM THIS BOOK AND GO OUT AND MAKE A BETTER WEB/ 
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A history of web standards 


n this appendix, you'll get a brief overview of how the web was invented 


and its subsequent development. You'll also learn how standards are 
made by the W3C, why the Web Hypertext Application Technology 
Working Group (WHATWG) was formed, and the aims behind HTML5. 
To conclude, we'll take a brief look at the process behind the other major 
standard that’s covered in this book: CSS3. None of this information is 
necessary to use web standards but, like many other human endeavors, 
web standards are a product of their history as much as they are rational 


technical documents. An appreciation of the history will help you under- 


stand why the standards are the way they are. 


A short history of the web 


In the following sections, you'll learn about the history of the web, from 


its beginnings as an easy way to share physics papers to its current incar- 


nation as the repository of all the world’s knowledge and possible replace- 


ment for traditional operating systems. You'll also learn about the World 
Wide Web Consortium (W3C) and its role in providing the standards on 


425 
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which the entire web relies. You'll see how web developers have 
pushed the boundaries of what's possible with HTML4 and CSS2 to 
create the need for new standards, and you'll learn about how many of 
the common issues that today’s web developers encounter can be 
solved easily in HTML5 and CSS3. 


In the beginning 
In 1989, Tim Berners-Lee was thinking about the difficulties scientists 
at CERN encountered when sharing their papers and research results. 
Each had tools for writing papers and other documentation on their 
own computers, but CERN was mostly populated by researchers visit- 
ing from the universities that employed them. They brought their own 
computers with them, so there was a wide variety of different comput- 
ers, each with unique documents. If you wanted a document from a fel- 
low researcher’s computer, then it was likely you'd either need to learn 
to use a different computer or program than you were used to, or you'd 
need to transform the output of your colleague's software to make it 
compatible with your own. Berners-Lee had written several of these 


DOM LEVEL 1 
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m: 
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conversion utilities but realized that, instead of a succession of small 
utilities, he would be better off solving the general problem. He 
believed a hypertext system would be ideal, but systems at the time 
were too complex and difficult to author for. He set about designing a 
simple hypertext system based on Standard Generalized Markup Lan- 
guage (SGML) for a distributed client-server architecture. 


This culminated in the release, on Christmas Day 1990, of the World- 
WideWeb browser and server. It allowed each individual to publish 
their documents in a standard format that anyone else could then read 
across the network using the browser. The browser didn’t need to be a 
particular bit of software; anyone was free to implement a viewer. The 
HTML document format was plain text interspersed with special tags 
marked by angle brackets, such as <p> for 


paragraph or <li> for list item, to mark the 1990-1993 


purpose of the text. These documents could HTML 10 ERA 
be easily created on any type of computer. Шынын 


The idea quickly caught on in the academic 
world, and several more browsers 
appeared: libwww, Mosaic, Midas, Erwise, 
ViolaWWW, and Arena, among others. The 
authors of the various web browsers collab- 
orated on the www-talk mailing list, dis- 
cussing implementation strategies and 
arguing about new features. Implementa- 


tion usually won out over theory —when SERVER 
Marc Andreessen proposed the <img> tag, it oo "*"*** erepti 


CLIENT 
was felt by many to be the worst of several 
proposals put forward. But Andreessen was 
the first person to implement his proposal, 
. А IT’S ОК FOR DOCUMENTATION, 
so that was the tag everyone used in their BUT I CAN'T SEE IT CATCHING 
ON FOR ANYTHING ELSE. 


pages, and it’s the tag we still use today. 


The primacy of features over standardiza- 
tion threatened to destroy the ideals on 
which the web was founded before it even 
really got started — the situation was heading 
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back toward the original state of affairs — documents compatible with 
only a single client application. 


In an effort to stem the tide, Tim Berners-Lee and Dave Raggett pro- 
duced a draft document in April 1995, "Hypertext Markup Language, 
Ver 1.0," and submitted it to the Internet Engineering Task Force 
(IETF). 


The IETF was the standards body that controlled most of the standards 
relevant to the internet: TCP/IP for network communication; DNS for 
name resolution, so you can type in an easy-to-remember address like 
yahoo.com instead of 67.195.160.76; and SMTP for email, among many 
others. The published standards were known as Requests for Com- 
ments (RFCs), reflecting the consensual attitude that marked the 
growth of the internet over the previous two decades. 


The HTML 1.0 draft was overtaken by the rapid development of 
browsers. In the time it took to move through the standards process, 
the state of the art in web browsers moved on significantly. But the 
web was becoming increasingly popular, so the need for some sort of 


standard was even more acute: HTML 1.0 was soon to be replaced by 
HTML 2.0. 


Browser wars 


The first commercially successful web browser was Netscape Naviga- 
tor. Version 1.0 was released on December 15, 1994 and quickly cap- 
tured huge market share. It was based on the Mosaic code originally 


developed by Marc Andreessen. 


Also in 1994, the World Wide Web Consortium (W3C) was founded by 
Tim Berners-Lee. The goal of the W3C was to encourage the adoption 
of standards across the internet industry, but initially the HTML stan- 
dard efforts remained focused within the IETF. 


In August 1995 Microsoft launched Internet Explorer, also based on 
the Mosaic code. It was not very competitive with Navigator in fea- 
tures and was quickly superseded by version 2.0 in November 1995. 
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The same year also saw the 
launch of Yahoo.com (March 
1995), Amazon.com (July 1995), 
and eBay.com (September 1995), 
along with many other shorter- 
lived web brands—or, as they 
soon became known, dot-coms. 
The internet boom was ready to 
happen, and both Netscape and 
Microsoft wanted to be in posi- 
tion to take advantage of it. 


The first official standard for 
HTML (HTML 2.0) was published 
in April 1994 with revisions in 
July 1994 and February 1995; it 
was finally accepted as a standard 
by the IETF in September 1995. 
The goal of the document was to 
describe common browser capa- 
bilities as of June 1994, so it 
reflected most of the functionality 
available in the browsers released 
that year. 
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1993-1995 
INTRODUCING THE FORM ELEMENT 
SERVER 
BEEBE EB шинининининини BENHBNRHN 
CLIENT 


NOW Т CAN SHOP ONLINE- 
BOOKS, CLOTHES, UNSHIELDED 
TWISTED PAIR CABLES... 


By the time versions 3.0 of IE and Navigator were released in August 


1996, IE was much closer in terms of features, and the browser wars 


were on. In an effort to grab market share, both vendors rushed to 


implement new features with little regard for compatibility. Initially 


this wasn't a problem, because Netscape had as much as 8096 of the 


market; but as IE gained ground, thanks to improved features and an 


aggressive marketing campaign, developers had to contend with two 


browsers with similar features but very different implementations. 
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1995-1997 


HTML 32 ERA 


CLIENT-SIDE INTERACTIVITY 
WITH JAVASCRIPT 


CLIENT 


HMM, ANNOYING ANIMATIONS AND 
LAYOUT TABLES, NOT SURE THIS 
IS PROGRESS. 


The W3C attempted to stem the tide by 
publishing a draft standard, HTMLS. It 
wasn't compatible with either of the major 
browsers, so it struggled to gain traction. 
A short-term compromise was reached in 
HTML 3.2. This more closely reflected the 
functionality of contemporary browsers. 
Many of the features proposed for 
HTMLS were carried forward to the spec 
for HTMLA. 


1497-2010 


HTML 4.0 ERA 


CLIENT-SIDE INTERACTIVITY 
WITH JAVASCRIPT 


+ > Xx 


SERVER 
BEEBE ERB ERB RB Pe eee) 
CLIENT 
I CAN DO EVERYTHING ON THE 


WEB. NO NEED FOR DESKTOP APPS/ 
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W3C standards process in 1998 


In May 1998, the W3C formalized its standards process with the publication of 
the document “World Wide Web Consortium Process.” It listed three stages a 
standard had to go through: 


© Working Draft (WD)—The proposed standard may go through several 
drafts. Once the standard has stabilized, the editor issues a Last Call for 
comments, and then the standard can move on to the next stage. 


© Proposed Recommendation (PR)— The Proposed Recommendation stage 
lasts at least four weeks. A PR is voted on by W3C members. After the vote, 
the standard is either returned to the Working Draft stage or, perhaps with 
modifications, advances to be a full recommendation. 


© W3C Recommendation (R)—A Recommendation indicates that consensus 
has been reached among W3C Members and the specification is appropriate 
for widespread use. After the standard has become a Recommendation, only 
minor revisions are allowed to correct minor errors or clarify issues. 


From web pages to web applications 

As you've just seen, HTML was originally designed for sharing docu- 
ments. The only interactive elements in HTML 1.0 were the hyperlinks 
between documents. HTML 2.0 introduced forms, which allowed users 
to send information back to the server. Shortly after that, Netscape 
introduced JavaScript that enabled web pages to respond to user 
actions without going back to the server at all. In this section, you'll see 
how the addition of client-side interactivity turned out to be a game- 
changing move for the web. 


Although the early versions of JavaScript were limited, it caught the 
imagination of web developers. It was initially developed by Netscape, 
but was copied by Microsoft and soon became standardized under the 
umbrella of Ecma International as ECMAScript in 1997 (these days, 
though, nearly everyone still refers to it as JavaScript). 


JavaScript can update browser content through the Document Object 
Model (DOM). The DOM represented the HTML document as a tree 
of objects, so you'll frequently hear it referred to as a DOM tree. With 
the release of Netscape Navigator (now Communicator) 4.0 and IE 
4.0, the DOM became a complete interface, and developers were able 
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to produce highly interactive web pages. This became known as 
Dynamic HTML (DHTML). 


Unfortunately, the DOMs implemented in Navigator and IE were very 
different—far more incompatible than the implementations of Java- 
Script in each browser. This meant that coding DHTML in a cross- 
browser—compatible manner was something of a challenge; develop- 
ers had to produce two versions of their application code, one for IE 
and one for Navigator. The extra code made it more likely that devel- 
opers would make mistakes. Sites that made heavy use of DHTML 
tended to be unreliable and slow in at least one, if not both, major 
browsers. As a result, DHTML and JavaScript gained a bad reputa- 
tion. On the other hand, JavaScript was often the only way to work 
around the incompatibilities between browsers. This is a purpose for 
which JavaScript is still used extensively today. The W3C stepped in 
with the DOM Level 1 standard in late 1998, and Microsoft provided 
partial support for it in IE5. Netscape planned to add support in its ver- 
sion 5.0; but as Netscape struggled to compete with the far greater 
resources of Microsoft, that plan never saw the light of day. When 
Microsoft released versions 5.5 and 6.0 of IE, version 6.0 claimed “full 
DOM Level 1 support," although inconsistencies in the standard meant 
that not everyone agreed. Meanwhile, Netscape faded into the back- 
ground, was bought out by AOL, and eventually gave up on browser 
development. The code for Navigator was donated to the world as 
open source and eventually was reborn as Firefox. 


W3C standards process in 1999 


In November 1999, an update to the "World Wide Web Consortium Process" doc- 
ument added an additional stage to the process: the Candidate Recommenda- 
tion. This recognized the need for implementation feedback prior to the 
standard being published as a Recommendation: 


9 Working Draft (WD)— The initial publication of the standard, used to gather 
public feedback. A standard typically has several Working Drafts before 
advancing to the next stage. 

© Candidate Recommendation (CR)— After the specification has stabilized, it 
becomes a CR. At this point, browser vendors are expected to begin implementing 
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(continued) 


the standard in order to provide feedback about its practicality. It isn’t unusual 
for a standard to revert to a WD several times after becoming a CR. 


© Proposed Recommendation (PR)—After some practical implementation 
experience has been gained, preferably at least two independent and 
interoperable implementations, the standard can advance to the PR status. 
This is an opportunity for final review within the W3C. The standard is either 
approved by the Advisory Committee and advances to a full Recommenda- 
tion, or it returns to WD status for further work. 


© W3C Recommendation (R)— As before, when published as a Recommenda- 
tion, the standard is ready for widespread deployment. 


After the frantic pace of releases in the second half of the 1990s, things 
slowed down for HTML. The DOM Level 2 spec was published in late 
2000, followed by DOM Level 3 in 2004. CSS saw a major revision to 
2.1 in February 2004, but it didn’t see full support in IE until the ver- 
sion 8 release in March 2009. 


USER FRIENDLY by J.D. “Iliad” Frazer 


I NEED A WEBSITE THAT 
WILL MAKE ME INTO A 
MILLIONAIRE. CAN YOU 
CODE IT FOR ME? 
"^ SURE, WHAT 
DOES IT NEED 


I ALREADY TOLD YOU. BUT WHAT DOES IT 
IT NEEDS TO MAKE ME NEED TO DO? 
INTO A MILLIONAIRE. €———Ó 
LOOK, IF YOU'RE NOT 
A GOOD ENOUGH WEB 


Me DEVELOPER TO 
J HANDLE THIS, | 


COPYRIGHT ©2008 J.D. "Mad" Frazer KTTP:/ /WWW.USERIRIENDLY.ORG/ 


Microsoft, no longer under much pressure to advance IE other than to 
add features that would be useful within the company’s own products, 
drastically reduced the resources devoted to its development. One of 
the few features added in this period was the XMLHTTP ActiveX con- 
trol (equivalent to a plug-in) as a standard component of IE5. The 
XMLHTTP object allowed JavaScript to make an asynchronous 
request back to the server to get new data without the user loading a 
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new page. This feature was required for Microsoft’s new web-based 
client for the Exchange 2000 email server. 


The stage was now set for the boom, from 1998 to 2000, and bust, from 
then until 2002, of the dot-com bubble. The web exploded, both in 
popular awareness and size, taking advantage of all the features of 
НТМІА and, somewhat later, CSS2. Where features were lacking in 
the standards, developers used JavaScript or third-party plug-ins, 
such as Macromedia’s (now Adobe’s) Flash, to fill in the gaps. 


Still, many people thought the future of the web was not with HTML 
and CSS. This quote from a Dr. Dobbs article in 2002 is typical: “Even 
today, HTML offers scant control over design essentials like typogra- 
phy and screen layout, and does little to accommodate complex interac- 
tions between browsers and servers. Making a trip to the server after 
each mouse click is a fairly inefficient way to deliver information. As 
Web development increasingly focuses on applications, markup’s limi- 
tations are becoming more and more apparent.” 


Two events heralded a new approach to web applications. First, the 
Firefox browser, which is the open source descendant of Netscape 
Navigator, added its equivalent to IE’s XMLHTTP: the xnlHttpRequest 
(XHR) object. Second, Google launched a web-based email application 
that took advantage of this feature: Gmail. 


Gmail was unlike contemporary websites: after the interface was 
loaded, the page was hardly ever reloaded. Whenever the user clicked 
a link, instead of visiting a new page, some JavaScript intercepted it, 
sent an XHR request to the server, and then updated the already- 
loaded page when the request returned. Gmail worked in both IE and 
Firefox, and it was fast to use, comparable to desktop email clients 


such as Microsoft Outlook. 


Although it was far from the first web application to use XHR or simi- 
lar techniques, Gmail captured the imagination of web developers 
worldwide and led to a spurt in XHR-based web applications and 
renewed interest in JavaScript. The approach was soon given the acro- 
nym AJAX (for Asynchronous JavaScript and XML), which helped to 
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distance it from the tawdry reputation of DHTML despite being mostly 
the same thing. Although the web had long been touted as a platform 
for applications, the AJAX trend looked like it had a chance of making 
that possibility a reality. 


The competing standards 
You may have wondered what the W3C has been doing in the decade 
since HTML 4.01 was released. It has, of course, been working on 
plenty of standards other than HTML, but it’s also working ona 
replacement for HTMLA. The W3C decided that the future of HTML 
lay in XML. XML is superficially similar to HTML — documents, tags, 
and elements all exist in XML, but it has two major differences: 


> XML parsing ts much stricter than HTML. A few mistakes in an HTML 
document will, in many cases, not even be noticed; the browser will 
correct the errors as best it can and carry on. A single error in an 
XML document causes the parsing to fail and an error message to be 
displayed. The stricter approach allows browsers to be more effi- 
cient, which is particularly useful on mobile and low-power devices. 


© XML ws extensible. If you want to add new elements to your XML 
page, you can do so. You describe those elements in a separate file 
and link to it from your document. Your new elements are then just 
as valid as any specified by the W3C. 


The first step was to redefine HTML 4.01 as an XML standard. 
XHTML 1.0 became a Candidate Recommendation in October 2000. It 
contained no new elements or features; all the valid elements were 
identical to those in HTML 4.01. The only changes came from it now 
being a dialect of XML. The plan was to extend XHTML in a modular 
fashion by plugging in new XML dialects. Some of the better-known 
XML dialects the W3C expected to be plugged in to XHTML were 
Scalable Vector Graphics (SVG), which became a CR in August 2000; 
and MathML, an XML language for describing equations, which 
became a CR in April 1998. The modular approach allowed different 


technologies to be worked on at different paces. 
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XHTML SOUNDS GREAT! 
WHY ISN'T EVERYONE 
' USING IT? THE ERROR HANDLING 15 
a TOO DRACONIAN-HALF 
THE WEB WOULD BE NOTHING =~ 
ВИТ ERROR MESSAGES IF WE 
SWITCHED TOMORROW. ә 
= BUT WOULDN'T THAT ENFORCE \ l | 
HIGHER STANDARDS? 
SE eer CANT eS ВАР OK LET ME SHOW YOU AN EXAMPLE, 


HERE ARE TWO IDENTICAL PAGES, 
EXCEPT ONE IS XHTML AND ONE IS HTML. 


Die Edt View History Bookmarks Pols Help Die Edt View History Bookmarks pois Help 


B XHTML Test Page " L ~| "Bi грн boog eshoni xhtml. Ф * v 
This page contains an error XML Parsing Error: not well-formed 
Location: http://www.boogdesign.com/examples/xhtml.xh 
There is an error in this page & Line Number 9, Column 40: 
<p>There 15 an error in this page 6</р> 
Done Done 


YOU MUST HAVE. MADE. 
A MAJOR MISTAKE IN BOTH DOCUMENTS, 
' TO GET SUCH A HORRIBLE I USED A RESERVED CHARACTER, 
Pa ERROR MESSAGE! THE AMPERSAND, 
WITHOUT THE CORRECT N 
ESCAPE SEQUENCE. 
\ 7) 
CN ONLY ONE CHARACTER IS WRONG? l | 
WELL, THAT RESULT DOES SEEM 
ALITTLE EXCESSIVE, BUT NOW YOU MIGHT WANT TO DISPLAY 
YOU KNOW YOU VE MADE USER CONTENT, OR PULL IN CONTENT 
A MISTAKE AND CAN CORRECT IT. FROM ANOTHER WEBSITE: THAT HAS 
N TO BE VALID TOO. AND EVEN IF YOU GET 
THINGS RIGHT, IE DOESN'T SUPPORT XHTML 
І MIGHT HAVE KNOWN IE WOULD CORRECTLY BEFORE VERSION 4. 
COME INTO IT SOMEWHERE... 


The drive toward XML meant that HTML was largely sidelined. The 
focus was on building compound documents out of various XML dia- 
lects. This included the HTML-like XHTML and the previously men- 
tioned SVG, MathML, but also XForms, RDF (Resource Description 
Framework), and any number of other proposals. It was envisaged that 
you might write web applications without using any XHTML at all. 


www.it-ebooks.info 


Step forward WHATWG 437 


In 2004, at the W3C Workshop on Web Applications and Compound 
Documents, Opera and Mozilla, concerned that the standards process 
might become increasingly irrelevant to the web as it existed in the real 
world, put forward a position paper outlining an alternative approach. 
This paper outlined seven “Design Principles for Web Application 
Technologies” and, in the context of these, proposed answers to the 
questions the workshop had set out to answer. 


The document was voted down by the rest of the attendees, who 
wanted to stick with the current XML, rather than HTML, -based 
approach. Two days later, the Web Hypertext Application Technology 
Working Group (WHATWG) was formed. 


Step forward WHATWG 


The WHATWG set out to define the next HTML standard according to 
the seven principles set out in Opera’s and Mozilla's document. They 
underpin the entire approach taken by the WHATWG during the 
development of HTMLSA, so let's look at them now: 


> “Backwards compatibility, clear migration path” —\n 2004, IEG was the 
browser of choice for 80% of web users. The WHATWG felt that 
there was little point in specifying new HTML functionality unless it 
could at least be emulated in IE6 with JavaScript. If a plug-in was 
required to emulate the new features in IE6, then the chances were it 
would never see large uptake among web developers. 

© “Well-defined error handling” — A major point of incompatibility in con- 
temporary browsers was not what happened when the page author 
got everything correct, but what happened when they made a mis- 
take. The next standard should specify error handling and error 
recovery. 

© “Users should not be exposed to authoring errors” — This addressed a major 
difference of opinion with the XML-based approach at the W3C. 
WHATWG wanted browsers to recover from errors gracefully and, 


where recovery was possible, not display an error message to the 
user —just like HTML. 
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© “Practical use” —New features should be added based on use cases. 
Ideally, these should be based on real issues developers experience in 
working around the limits of existing standards. 


© “Scripting is here to stay” — JavaScript had become something of a sec- 
ond-class citizen in XHTML. Although the WHATWG preferred a 
declarative markup approach, especially for the initial application 
state, it recognized that scripting will always have a significant role. 


© “Device-specific profiling should be avoided” —The W3C produced a cut- 
down version of the XHTML spec for mobile devices. The 
WHATWG felt that authors shouldn't have to produce different ver- 
sions of their markup for different devices. 


|^ “Open process” — Although the W3C has open mailing lists, it also has 
private ones. WHATWG activity is conducted entirely under public 
scrutiny. 


This isn’t to say the principles of the WHATWG were entirely orthogo- 
nal to those being followed by the W3C’s XML-focused working 
groups, but there was a significant difference in approach. The W3C 
continued to work on XHTML2 while the WHATWG worked on 
HTML5. XHTML2 had the backing of the recognized standards body, 
but it primarily appealed to people who wanted to use other XML- 
based technologies. НТМІ5 garnered far more popular support with 
its “evolution rather than revolution” approach and its exhaustive doc- 
umenting of browser behavior. 


In addition to the seven principles, the HTML5 spec took the step of 
combining the separate HTML and DOM specs by the W3C. Experi- 
ence had shown that trying to maintain them as two specifications led 
to inconsistencies and incompatibilities. In the HTML5 spec, the DOM 
became the basis of correct parsing —two implementations would be 
interoperable if they produced the same DOM tree from an HTML 
document. 


Eventually the W3C realized that it risked being made irrelevant by 
real-world events. In March 2007, it relaunched the HTML Working 
Group. Mozilla, Apple, and Opera proposed that the WHATWG 
НТМІ5 specs be taken as the starting point of this new group's work, 
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and the rest of the working group agreed. At this point, XHTML2 was 
put on hold and everyone was able to agree that the future of the web 
would be HTMLS. 


C992 evolves into C993 


While all this was going on in the world of markup, work was continu- 
ing on CSS at the W3C in the form of CSS Level 3, or CSS3 for short. 
CSS3 also tried to correct a number of past mistakes in drafting specifi- 
cations, starting with fixing CSS2. 


The CSS2 specification had been through the 1998 standards process 
and thus had no implementation feedback before being published as a 
Recommendation. As vendors tried to implement it, a number of issues 
were found that made it impossible, or impractical, to achieve compli- 
ance with the standard. 


CSS 2.1 set out to rectify those mistakes and provide a solid, imple- 
mentable base on which to build CSS3. The work to set CSS 2.1 right 
has taken more than eight years, but was finally completed in June 
2011. But the timing of this was unfortunate. IE6 was released in 
August 2001, a few years after the CSS2 publication but a year before 
the first draft of CSS 2.1. This is significant because IE6 is the browser 
that won the first round of the browser wars. It achieved 83% market 
share by 2004 as Netscape collapsed. With no competition, Microsoft 
wound up IE development; the web would be stuck on IE6 for many 
years. In comparison to the two-year-or-less gap between most previ- 
ous IE releases, it would be nearly five years before IE7 appeared. 
Even though IE6 had good support for CSS2 compared to other brows- 
ers available in 2001, it soon fell behind standards. 


CSS3 is modular; it’s split into sections such as Backgrounds and Bor- 
ders, Values and Units, and Text Layout. This means that instead of 
waiting years fora huge, monolithic standard to be finalized, as has 
happened with CSS 2.1, less controversial and more useful sections can 
be prioritized and pushed through the standards process more quickly. 
In the meantime, until a particular module is ready, the corresponding 
section of the CSS 2.1 spec is regarded as the current standard. 
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HEY! IT SEEMS LIKE HALF 
OF CSS3 IS REALLY CSS 21 


& S TAKING SO LONG? 


BUT EVEN IE8 SUPPORTS CSS 21/ 


b 


АН! BECAUSE IT'S NO GOOD JUST 
SAYING YOU MEET THE STANDARD: 
YOU NEED TO BE ABLE TO PROVE IT! 


A history of web standards 


IT'S ALL THE WORK OF THE SAME 
GROUP AT THE W3C. 
CSSZ HAD TO BE FIXED BEFORE 
THEY COULD MOVE FORWARD. ES 


\ 


CSSZ BECAME A STANDARD UNDER N/A 
THE OLD PROCESS, NOW TWO 
FLILLY INTEROPERABLE l 
IMPLEMENTATIONS ARE NEEDED. 


THE W3C HAD TO WAIT FOR A LIBRARY OF TEST 
CASES; WE NEED TO BE ABLE TO TEST 
WHETHER BROWSERS MEET THE STANDARD. 


\ 


EXACTLY. THE CSS 21 SPECIFICATION 
FINALLY BECAME A W3C 
RECOMMENDATION IN JUNE 2011 


| 


NOW THAT THE HISTORY LESSON IS OUT OF THE WAY, THE REST OF THE 
APPENDIXES ARE TARGETED AT TAKING A COMPLETE NOVICE AT WEB 

"^ DEVELOPMENT AND GIVING THEM ENOUGH KNOWLEDGE TO APPRECIATE THE REST 
OF THIS BOOK. THEY ALSO CONSTITUTE A USEFUL REFRESHER COURSE FOR MORE 
EXPERIENCED WEB AUTHORS. FIRST YOU'LL LEARN ABOUT HTML ITSELF. 
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f you've never created a web page before picking up this book, this 
appendix will bring you up to speed on the fundamentals of Hypertext 
Markup Language (HTML) so you can fully enjoy the rest of the book. It 
covers these areas: 


© Basic HTML syntax: what it’s made up of 

© Common HTML elements for text, metadata, links, and images 

^ What makes a particular text file an HTML document 

^ How to learn by example with View Source 

This short appendix will be a whirlwind introduction. To get you up to 
speed as quickly as possible it’s opinionated about issues that are funda- 
mentally a matter of style or preference. I won't waste your time showing 
you several slightly different ways of doing the same thing; Ill concen- 


trate on the things you need to know to understand the HTML in this 
book. 
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The components of hypertext 


HTML is a language for describing hypertext documents. Hypertext 
documents are made up of headings, paragraphs, bulleted lists, and, 
importantly, links to other hypertext documents; it’s the links that con- 
stitute the Ayper part of hypertext. In this section, we'll look at things 
from the bottom up, starting with how an HTML document indicates 
the existence of a paragraph or a heading before combining everything 
to make a document. The following diagram shows the concepts that 
make up HTML, from simple components on the left to complete docu- 
ments on the right. 


HTML CONCEPT MAP 


PLAIN 
TEXT 
———этлоз 
Ex m 


7 


ATTRIBUTES 
SPECIAL с” 
CHARACTERS 


ELEMENTS ————У DOCUMENTS 


Tags, elements, and attributes 


A fag is a bit of text that acts as a point demarcation. To create a tag, 
HTML gives certain characters special meaning: the angle brackets 


<and >. 

Putting characters within angle brack- ТАКТ a 
д : AG 

ets creates a tag. You can see in this bom "Me 

diagram that there are two tags, «hi» <һ1>А Heading</h1> 


and «/h1»: a start tag and an end tag. „= es 


An end tag always matches a start tag, CONTENTS 
except that it has a slash after the 
opening angle bracket. 


The combination of a start tag and an AN HTML ELEMENT 
end tag defines an element. Everything Pam esee 
between the two tags is referred to as 


<h1>A Heading</h1> 


the contents of the element. 
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Start tags can also have attributes: a AN ATTRIBUTE 

name optionally followed by a value. 

An attribute is used to select between <p class="special"> 
different options of element function A special paragraph 
or to provide extra information about </p> 

what the element describes. 


Some elements need to have at least one attribute to be any use; for 
instance, a <link> element has an attribute that contains the address of 
the HTML page it links to. Some attributes are specific to certain ele- 
ments, and others can be applied to any element. The two most com- 
mon attributes you'll see are id, to assign a unique identifier to an 
element, and class, to assign a space-separated list of classes (think of 
them as categories or tags). You'll see these two attributes a lot in 
appendix C when you learn about CSS. 


Elements can contain text, but they can p» 
A paragraph 


example we would say, "The <p> <em>with emphasis</em> 


: » </p> aaa | ——^ 
element contains the <em> element. perse 


also contain other elements. In this 


PARENT ELEMENT 


Any element that contains other ele- (>) 


ments is said to be the parent of those 


other elements; those are in turn its chil- gy 3 
dren —the idea is that the elements form A PARAGRAPH (Em) 


a tree structure, like a family tree. 


» 
The «p» element has two children: the WITH EMPHASIS 


text "A paragraph" and an <em> 
element. The <em> element has one 
child: the text 1t contains. 


HTML documents 


An HTML document is a tree of elements descending from an «html» ele- 
ment and its two children: <head> for metadata (literally, "data about 
data”) and other nonvisible elements, and <body> for the page content. 
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A minimal HTML document can be created out of the earlier fragment 


by adding these three necessary elements and a title: 


«html» 
«head» 

<title>Minimal document«/title» 
«/head» 
«body» 

<p>A paragraph 

<em>with emphasis</em></p> 
</body> 
«/html» 


You can create an HTML document 
yourself by opening a text editor, 
copying this code into it, and saving 
it as a file with the extension .html. 
After you've done that, double- 
clicking the file will open it in your 
browser. 


© 
e О 


MINIMAL A PARAGRAPH (En) 


DOCUMENT 


к 
WITH EMPHASIS 


As you see more complex documents with many more elements, bear in 


mind that ultimately the browser turns them into a tree like this. When 


you're applying CSS or doing scripting, it’s common to think in terms 


of nodes in this tree rather than elements in the document. 


Markup, parsing, and rendering 


The activity of taking plain text (the content) and turning it into an HTML docu- 
ment is called marking up: adding markup to the plain text to indicate which bits 
of it are headings, paragraphs, bulleted lists, and links. Note that after a text 
document has been marked up into HTML, it’s still also a text document. You 
can open it in Notepad or any other text editor, and it’s treated like any other 
plain text. Only when the text document is loaded into a browser does it become 
a hypertext document. When a string of text like “<p>A paragraph</p>” is de- 
scribed as “a paragraph element,” that’s shorthand for “this string of text, when 
read by the right piece of software under the right conditions, will create within 
that software an entity that is a paragraph element.” The process of taking the 
text file containing the markup and turning it into the tree-like representation of 
an HTML document is called parsing. The process of taking that tree and show- 
ing it to the user is called rendering. 
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Now that you've got the general idea, the next section will go into more 
detail about common elements for marking up text content. 


Elements for text 


This section looks at HTML elements for marking up text —which, for 
many web pages, is the majority of the content. Nearly every element 
can contain text, but several are specifically dedicated to the task. The 
most common of these is the paragraph element, <p></p>, of which 
you've already seen several examples, but there are many others for 
headings, unordered lists, ordered lists, line breaks, horizontal rules, 


and more. 


Headings and paragraphs 
Paragraphs and headings work in concert to create the bulk of the text 
content of a document and its implicit structure. HTML has six heading 
elements, which are numbered 1 through 6: «hi», <h2>, <h3>, <h4>, «h5», 
and <h6>. The most significant is <h1>, which is usually the document 
title; the sections should begin with <h2> elements and the subsections 
with <h3>, and so on: 


html Р . 
Pd The main heading 
<head> 

«title» Main introduction 


Headings and 
implicit structure 


First section 


«/title» Section introduction 
«/head» Subsection heading 1.1 
«body» Subsection 1.1 


«hi»The main heading</h1> 

<p>Main introduction</p> 

<h2>First section</h2> Section introduction 
<p>Section introduction</p> Subsection heading 2.1 
<h3>Subsection heading 1.1</h3> 
<p>Subsection 1.1</p> 
<h2>Second section</h2> 
<p>Section introduction</p> Subsection 2.1.1 
<h3>Subsection heading 2.1</h3> 

<p>Subsection 2.1</p> 

<h4>Sub-subsection</h4> 


Second section 


Subsection 2.1 


Sub-subsection 
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<p>Subsection 2.1.1</p> 
</body> 
</html> 


As you can see, the headings get smaller as they decrease in 
importance. 


Both headings and paragraphs automatically break the flow of text at 
the position of their end tag. Although the previous markup shows the 
elements on separate lines to match the screenshot, this isn’t necessary. 
The markup could be all on a single line, and it wouldn’t change the 
results in the browser —all whitespace characters (see sidebar) are col- 
lapsed to a single space. 


Whitespace 


Whitespace is a collective term for any sort of spacing character. To understand 
it fully, we need to take a step back and consider what a text file really is. A text 
file is a long list of characters, some of which are special control characters to 
indicate line feeds, carriage returns, and tab stops. Think of an old-style teletype 
or line printer with a print head: these characters are instructions telling the print 
head to do something other than print a character but that does take up space. 


On modern computers, these characters control the layout you see in a text ed- 
itor; you see several lines of text, but only because the text contains several car- 
riage returns and line feeds. For HTML purposes, many of the control characters 
are considered whitespace. The full list of these characters is as follows: space, 
tab, form feed, zero-width space, carriage return, line feed, and combined car- 
riage return and line feed. 


Here’s an example with longer paragraphs. The markup is wrapped at 
70 characters, ignoring the position of the tags. The tags are shown in 
bold so they’re easier to spot: 


<h1>A quote from Ada Lovelace</h1><p>The Analytical Engine has no 
pretensions whatever to originate anything. It can do whatever we 
know how to order it to perform. It can follow analysis, but it has 
no power of anticipating any analytical revelations or truths. Its 
province is to assist us in making available what we are already 
acquainted with.</p><p>The Analytical Engine weaves algebraic 
patterns, just as the Jacquard loom weaves flowers and Leaves. </p> 
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Viewing this markup in the browser reveals that the line breaks go 


wherever the elements and the size of the window dictate: 


A quote from Ada 
Lovelace 


The Analytical Engine has no pretensions 
whatever to originate anything. It can do 
whatever we know how to order it to perform. 
It can follow analysis, but it has no power of 
anticipating any analytical revelations or 
truths. Its province is to assist us in making 
available what we are already acquainted with. 


The Analytical Engine weaves algebraic 
patterns, just as the Jacquard loom weaves 
flowers and leaves. 


A quote from Ada 
Lovelace 


The Analytical Engine has no pretensions 
whatever to originate anything. It can do 
whatever we know how to order it to perform. 
It can follow analysis, but it has no power of 
anticipating any analytical revelations or 
truths. Its province is to assist us in making 
available what we are already acquainted with. 


The Analytical Engine weaves algebraic 
patterns, just as the Jacquard loom weaves 
flowers and leaves. 


If there’s a situation where a paragraph requires a line break, such as 


an address or a verse of poetry, you can use the <br> element: 


<p>The Analytical Engine 
weaves algebraic<br>patterns, 
just as the<br>Jacquard loom 
weaves«br» flowers 
and«br»leaves.«/p» 


The Analytical Engine weaves algebraic 
patterns, just as the 

Jacquard loom weaves 

flowers and 

leaves. 


The «br» element is unique among those covered so far because it con- 


sists of a single tag. It can have no children. The <br> element and oth- 


ers like it are known as self-closing elements. They're sometimes written 


with a closing slash like this: <br/>. 


Line breaks aren't for layout 


A common beginner's mistake is to use line-break elements or empty paragraph 
tags to increase vertical spacing between two other elements. There's no need 
to do this in HTML: spacing between elements can be entirely controlled with 
Cascading Style Sheets (CSS, covered in appendix C). 


HTML is for describing content, not presentation. You'll benefit in the long run 
if you avoid using meaningless, empty elements for layout. 


HTML' ability to ignore spacing and line breaks and reflow text to fit 


the available space is usually an advantage: text flows automatically 
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into the space available to it in the browser window, mobile device, or 
web-enabled refrigerator on which it happens to be displayed. But 
sometimes the original text formatting is significant: for example, pro- 
gram listings or command-prompt output. For preformatted text like 
this, HTML has the <pre> element: 


<pre>The Analytical Engine weaves The Analytical Engine weaves 
laeb E $ algebraic patterns, just 
algebraic patterns, Just as the Jacquard loom 
as the Jacquard loom weaves flowers and 


leaves. 
weaves flowers and 


Leaves. </pre> 


Notice that the leading space on each line is faithfully reproduced in 
the browser output. 


Another common textual feature is lists. Bullet points can make a mem- 
orable way to highlight key facts. Some documents are nothing but 
lists —you may have sat through terrible presentations that were built 
on the philosophy that bulleted lists were an appropriate way to show 
paragraphs of text that should be read out loud. 


This section will introduce the two most common HTML lists: 
^ Unordered 
^ Ordered 


Each consists of a parent element and one or more child elements. 
Unordered and ordered lists differ only in the parent element. 


* List item 1. List item 
* List item 2. List item 
e List item 3. List item 
«ul» «ol» 
<li>List item«/li» <li>List item</Li> 
<li>List item«/li» <li>List item</Li> 
<li>List item«/li» <li>List item</Li> 
«/ul» </ol> 
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An unordered list, the traditional bulleted list of PowerPoint legend, is 
made up of a <ul> element and a collection of <li> child list items, and 
an ordered list is made up of a <ol> element and a collection of child 
«li» items. The list items can themselves include more list elements 


with their own list items, resulting in a nested list. 


• List item 
• List item 
o Nested item 
o Nested item 
• List item 


«ul» 
<li>List item«/li» 
«li»List item 
«ul» 
«li»Nested item«/li» 
«li»Nested і+ет</11> 
«/ul» 
«/li» 
<li>List іёем</11> 
«/ul» 


1. List item 
2. List item 
1. Nested item 
2. Nested item 
3. List item 


«ol» 
<li>List item«/li» 
«li»List item 
«ol» 
«li»Nested item</1i> 
«li»Nested item«/li» 
«/ol» 
«/li» 
<li>List item«/li» 
«/ol» 


It's perfectly acceptable to nest ordered lists within unordered lists and 


unordered lists within ordered lists. 


• List item 
• List item 
1. Nested item 
2. Nested item 
• List item 


«ul» 
<li>List item«/li» 
«li»List item 
«ol» 
«li»Nested item</1li> 
«li»Nested item</1li> 
«/ol» 
«/li» 
<li>List item</li> 
«/ul» 


1. List item 
2. List item 
o Nested item 
o Nested item 
3. List item 


«ol» 
<li>List item</li> 
«li»List item 
«ul» 
«li»Nested item</1li> 
«li»Nested item</1li> 
«/ul» 
«/li» 
<li>List item</li> 
«/ol» 
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Lists are commonly used to mark up navigation: a list of links. Nested 
lists are a good match for the sections and subsections of a website. In 
the next section, we'll look at some elements intended to be used inside 
the major structural elements we've covered. 


Emphasis and typography 


Some words and phrases are so important in the context of their para- 
graph that they need to be given special emphasis. HTML provides two 
elements for this: <em> for emphasis and <strong> for strong emphasis. 


«p»The Analytical Engine has no 
pretensions whatever to 
<em>originate</em> anything. It 
can do whatever we know how to 
order it to perform. It can 


The Analytical Engine has no pretensions 
whatever to originate anything. It can do 
whatever we know how to order it to perform. 
It can follow analysis, but it has no power of 
anticipating any analytical revelations or 
truths. Its province is to assist us in making 
available what we are already acquainted with. 


follow analysis, but it has 
<strong>no power of anticipating 
any analytical revelations or 
truths</strong>. Its province is 
to assist us in making available 
what we are already acquainted 
with. </p> 


<em> and <strong> are inline elements, intended to appear within a line of 
text, whereas «p», <h1>, and <ul> are block elements, intended to create a 
new line of text. See the sidebar “Block and inline elements” for further 
details. 


Block and inline elements 


Visible HTML elements can be split into two broad categories: block and inline. 
A block element naturally takes up the full width available to it; consecutive 
block elements naturally start below the previous block element. Block elements 
include paragraphs, all the headings, and all the list elements you've seen. 


Inline elements fit exactly to their content and sit naturally on the line of text in 
which they're situated. Inline elements include «strong» and «em» (covered 
here) and others such as «b», «i», and «abbr». 


The key thing to remember at this point is that block elements can't appear in 
an HTML document as the children of inline elements. 
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The important consequence is that <em> and <strong> are always 
descendants of a block-level element like <p>. Block-level elements 
should never be children of inline elements, but inline elements can be 
children of other inline elements. 


<p>A paragraph with 
<em>emphasis</em> 
</p> 


<em> 
<p>A paragraph with emphasis</p> 
</em> 


<p>A paragraph with 
<em> 
<strong>strong</strong> 
emphasis 
</em> 
</p> 


There are several other inline elements, but we don’t have room to go 
into them. The final section of this appendix lists resources where you 
can look them up yourself; in the meantime, remember the rule dis- 
cussed here. 


Neutral elements: <div> and <span> 


<div class="person"> Rob Crowther 
<p class="full_name"> 
<span class="first_name"> London 
Rob 
</span> 
«span class="surname"> 
Crowther 
</span> 
</p> 
<p class="hometown"> 
London 
</p> 
</div> 
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Not everything can be marked up semantically as a paragraph or as 
emphasized text. Sometimes an element is needed to group other ele- 
ments, or to allow other information to be attached to a part of the doc- 
ument. For these situations, HTML provides the two elements <div> 


and <span>. 


A <div> is a block-level element, and a <span> is an inline element. By 
themselves, these elements are intentionally semantically neutral; they 
don’t “mean” anything—or, looked at another way, they can mean 
whatever you want them to mean, with the judicious use of id and class 
attributes, as in the previous examples. These elements are useful 
when you're applying CSS and creating layouts (more about this in 
appendix C). 


In this section, you've seen a variety of elements for text: paragraphs, 
lists, emphasis, and neutral elements. The web would be a dull place if 
this was all web pages were capable of. In the next section, you'll learn 
about the elements that make the web interesting: links, images, and 
other embedded resources. 


Links and embedded resources 


Text is all very well, but to make text into hypertext you need to add 
links. This section looks at links between documents and links within 
documents. It then covers other ways of linking external elements to 
HTML documents, both images and more general-purpose objects. To 
finish, it looks at <iframe> elements, which give you a way to embed an 
entire web page inside another one. 


Linke and anchors 


In HTML content, links that are supposed to be interacted with use the 
anchor element, <a>. A link ought to go somewhere, so the target loca- 
tion is given in the href (hypertext reference) attribute of the <a> ele- 
ment. Three categories of link can be used in the href attribute. The 
first is a full URL: 
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<p>Use 
«a href="http://www.google.com/"> Use the Google. 
the Google 
</a>. 
</p> 


This is normally used to link to a 
different website. It works equally 
well for linking to pages on the cur- 
rent site, but the extra characters 
required for a full URL are unnec- 
essary, as the next example shows. 


<p>Go to 
«a hrefz'"pages/links-3.html"» 
another page 
«/a». 
«/p» 


Go to another page. 


Winks 3 - Mozilla Firefox 


‘Links 3 - Mozilla Firefox - 
File Edit View History Bookmarks Tools Help 


File Edit View History Bookmarks Tools Help 
|Links з [21 


may, my comprehension сап only be an 
infinitesimal fraction of all I want to 
understand about the many connections and 
relations which occur to me, how the matter 


etc., etc. 
In almost every computation a great variety 


of arrangements for the succession of the 
nrocesses is nossihle and varions 


in question was first thought of or arrived at, 


bal [D Links 3 1+ | У 
сл gi 
й | el 
Go further down this page. Further down 
I never am really satisfied that I understand “ 
anything; because, understand it well as I Many persons who are not conversant with 


mathematical studies imagine that because 

the business of [Babbage’s Analytical Engine] 

is to give its results in numerical notation, the 
nature of its processes must consequently be 
arithmetical and numerical, rather than 
algebraical and analytical. This is an error. 

The engine can arrange and combine its 
numerical quantities exactly as if they were 
letters or any other general symbols; and in 

fact it might bring out its results in E 


It's common to annotate long documents in this fashion. Applying an 
ID to each of the headings allows a table of contents to be built up, let- 
ting a reader quickly access the relevant section. For example, on 
Wikipedia, each article has a table of contents made up of links you can 
click to take you to the relevant part of the article. 
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Images and other objects 


Images are embedded in HTML with the <img> element. The basic syn- 
tax is extremely simple; just the element itself and a single attribute are 
required: 


<img src-"dust-puppy.svg"» 


In this case, the image is much larger than the 
available browser window, so only the upper- 
left part of it appears on the screen. 


A less obvious problem is that if the image is 
unavailable for some reason, perhaps due to a 


failure on the server, or because the user is 
browsing without images, or because the author 
misspelled the image name, then there will be 
no evidence that the image is there at all. 


You can correct both these issues with a couple 
of common attributes, width (and/or height) and 
alt (alternative text): 

<img src="dust—puppy.svg" 


width="252px" height="356px" 
alt-"An image of Dust Рирру"> 


It's recommended that you always add an alt 
attribute to an «ing» element. In cases where 
the image is purely decorative or is described 
textually in some other way, it's permissible to 


set the alt attribute to an empty string: alt="". 


Usually you can do without width and height attributes, either because 
the image is sized appropriately to start with or because the size of the 
image is controlled with CSS (see appendix C). This lets you determine 
how big the image should be depending on what device is used to access 
the page. The main benefit of providing dimensions is that browsers 
know how much space to allocate when laying out the page, which 
improves performance. Notice that the image element is self closing — it 
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dants. The only widely sup- — QC [E sesion =] # x [С] 


ported possibility of providing 
fallback content should the 


image be unavailable is the alt 


X! An image of Dust Puppy 


attribute. If the image doesn't 
load or isn't in a format sup- 
ported by the browser, then the 
user sees the alternative text. 
This isn't something you're 
likely to have noticed unless you 
tried viewing the previous exam- 
ple in IE8, in which case you saw 
something like the image at right. 


Many people have long consid- 
ered this a failing of the <img> 
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element. Images appeared in the HTML spec because the most popular 


browser had support for them, and with the current syntax. Of course, 


it was the most popular browser because, in part, it was the first one 


that allowed the viewing of images without launching a separate appli- 


cation. Several features common to the early alternative proposals to 


the «ing» element have ended up as features in the «object» element, a 


general-purpose element for embedding content in your page. 


The «object» element can link to an arbi- 
trary file. The only additional require- 
ment is that you specify the file type: 
«object 

data-"dust-puppy.svg" 

type="image/svg+xmL" 

width="252px" height="356px"> 

An image of Dust Puppy 

</object> 


In browsers that support SVG images, the 
visible result is no different than including 
the image with the <img> element. 
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But in browsers that don’t support SVG, 2515) 
GO- E elopblobiect-1. 4m v] ** X Ig 


such as IE8 shown in the screenshot = Н 
wa Favortes Gof - | «| Фое... x >| с 27 


here, the content of the <object> element E 
is shown instead. Unlike <img>, <object> 
can have as many descendants as you 
need. The descendants are known as the 
fallback content. 


In this case, an obvious option is to zax 

- clappblobject-2.him v] #› x ff 
make the fallback content another G amine s A 
f . . wa Favortes Soj -| ос? xj» с 
image, except this time one that IE8 


does support: 


«object 
data-"dust-puppy.svg" 
type="image/svg+xmL" 
width="252px" height="356px"> 
<img 
src="dust—puppy.png" 
width="252px" 
height="356px"> 
</object> 


IE8 users will miss out on some of the 

advanced possibilities enabled by SVG, 
such as perfect scaling to any resolution, 
but they'll still see appropriate content. 


If you have no plans to take advantage of the additional capabilities of 
SVG, you're better off sticking to a standard image format in an <img> 
element. But outside of simple examples in books, the <object> element 
also allows the extension of the browser with plug-ins. A plug-in is an 
external program with support fora particular file type or technology. It 
registers the types of files it can support with the browser and, when the 
browser comes across an object element specifying one of these file 
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types, it hands the data over to the plug-in and lets it control what is dis- 
played in the element. This is how the popular Flash plug-in works; it’s 
the basis for popular sound and video sites like YouTube and last.fm. 


Why href and src and data? 

It may seem like the href, src, and data attributes do the same job for different 
elements. Why didn’t HTML standardize on one or the other? Usually href indi- 
cates somewhere a user can go, and src indicates something a browser should 
fetch, but it’s mostly historical accident whether an element uses one or the oth- 
er. It may seem that the <object> element has a data attribute just to force you 
to remember a third alternative, but the reasons are mostly historical. Back when 
the web was young, some browsers implemented new elements with href and 
some with src. The elements that survived to become the first HTML specifica- 
tion kept their attributes so as not to break backward compatibility. 


Inline frames 
Another common way of embedding content in your web page is the 
inline frame, known as the <iframe> element. This lets you create an 
embedded browser window inside the one the page is rendering in: 


<p>Here is another page:</p> Here is another page: 
«iframe 
srce"http://www.userfriendly.org/" 
width="320" height="240"> 
</iframe> 


The <iframe> is given dimensions and 


an entire other web page has been 


Ё 
Š 
= 
2 
i 


loaded into it. The page can be one 


from the same site as the parent page, 
specially designed to fit within the 
bounds of the <iframe>. This is an 
easy way to allow parts of the page to 
be updated without reloading the 
whole thing. 


The <iframe> element is used a lot for embedding advertising, display- 
ing videos, and Facebook applications. 
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Nonvisible elements 


Some HTML elements aren't intended to be visible in the page. These 
usually appear in the head section of the markup, although they can 
appear anywhere. You've seen at least one example already: the <title> 
element, which is usually visible only in the title bar or tab of the 
browser, or in search results. Three other elements are commonly seen 
in the head section: 


^ «linke elements — Reference external resources such as style sheets 
^ «script» elements — Specify code to be run in the browser 


^ «meta» elements — Provide key-value pairs of metadata 


Style sheets and scripting are covered in the next two appendixes, but 
the «neta» element isn't too important. Just remember when you come 
across one that it isn't expected to be displayed. 


In the previous sections, there have been a few statements along the 
lines of, "You can't put a paragraph element inside a heading element" 
and, "Inline elements should only contain other inline elements, not 
block elements." But what do those statements really mean? The next 
section considers these issues. 


Parsing and validation 


What will happen to you and your web pages if you ignore the advice 
given in the previous sections? If you nest a <div> inside a <span> and 


SIR/ THIS IS THE MARKUP POLICE. CLOSE THE 
TEXT EDITOR AND STEP AWAY FROM THE 
_ KEYBOARD! 


COPYRIGHT © 2001 ILLIAD WTTP://WWW.USERFRIENOLY.ORG/ 
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put it on a website, will the whole thing come crashing down around 
your ears? Will you be arrested for crimes against markup? 


Well, no. 


The less trusting among you may have created a document with a para- 
graph inside a heading and noted that the document loaded into the 
browser just fine, so it may seem as though you can do what I’ve been 
saying you can’t. This is an aspect of a wider debate —is an HTML doc- 
ument what some bloke says it is, or is it anything that works in the 
browser? This is a complex issue, and I don’t have room here to go into 
every part of it. This section aims to equip you with a basic understand- 
ing of the terms involved and highlight some of the consequences of not 
following “the rules.” 


Is this an HTML document? 


There are different ways that markup can be invalid. In this section, 
we'll look at several examples of invalid HTML, see what a browser 
does with them, and then use the examples to introduce the concepts 
and terminology involved. To start with, here’s the valid document 
from earlier: 


«html» 
«head» 
<title>Minimal document«/title» 


</head> A paragraph with emphasis 
«body class="simple"> 
<p>A paragraph 


<em>with emphasis</em></p> 
</body> 
</html> 


A valid document contains only elements listed in the HTML specifica- 
tion, and those elements contain each other in ways described in the 
specification; there’s a single <html> element with two children, <head> 
and <body>; inline elements like <em> are contained within block ele- 
ments like <p>; and so on. 
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The document can be made invalid in a number of ways. One is to use 
elements that don’t exist in the HTML specification. This invalid docu- 
ment replaces all the regular tag names with shortened versions: 


<ht> 
<he> 

<t>Minimal document</t> 
</he> 
«bo c="simple"> 

<p>A paragraph 

<em>with emphasis</em></p> 
</bo> 
</ht> 


Minimal document 


A paragraph with emphasis 


The browser copes well with this; the main difference is that the title is 
now visible, because the browser has no idea what a <t> element is. 


In this document, the closing angle bracket has been left off the end of 
each line: 


«html 
«head 
<title>Minimal document</title 
</head 
<body class-"simple" 
<p>A paragraph 
<em>with emphasis</em></p Minimal documentA paragraph with emphasis 
</body 
«/html 


Again the browser copes fairly well. The <title> element is lost because 
now it's in position to be an attribute of the <head> element; but the con- 
tent is all visible, and the one complete element, <em>, is displayed prop- 
erly. This demonstrates that web browsers are resilient to badly 
constructed HTML markup, but these two documents are broken in 
significantly different ways. To highlight this, let's force the browser to 
attempt to render these documents as XML, which is a much stricter 
standard, instead of HTML. To do so, you can change the file extension 
from .html to .xhtml. The two documents then create very different 
results: 
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Invalid document 1 Invalid document 2 


This XML file does not appear to have any style XML Parsing Error: 
information associated with it. The document not well-formed 


tree is shown below. Location: malformed.xhtml 
Line Number 3, Column 1: 


-«ht» 
-«he» «head 
<t>Minimal document</t> 9 
</he> 
-<bo c="simple"> 
-«p» 
A paragraph 
<em>with emphasis</em> 
</p> 
</bo> 
</ht> 


The first document, even though it has only one valid HTML element, 
is structured in a valid way, so the browser still parses it into a tree 
structure. Although this document isn’t valid HTML, it’s well formed: the 
elements, tags, and attributes follow the basic rules of markup. The 
second document doesn’t follow these basic rules, so as well as being 
invalid, it’s also not well formed. 


There are more subtle ways to make the markup invalid. Consider the 
following markup fragment: 


<p><strong>A slightly <em>odd</strong> looking sentence</em></p> 


This is invalid because the <em> and <strong> elements aren’t nested cor- 
rectly. The <em> element starts before the <strong> element end tag, but 
the <em> element end tag is outside the <strong> element. Either the two 
elements should be entirely separate, or one should be contained within 
the other. In keeping with the resiliency demonstrated previously, most 
browsers manage to render this fragment similarly. 


Firefox Chrome Opera IE 


| "Invalid/nestir e ==) 


|" Tinvalid'nestir e (2150 [C trad nesting 2- Wine ES] 


File Edit View History W opera |p x [е rer zrenl =) 4 
là 4 2 
Invalid nestin... | E bx Tm 2 i Favortes Ф iwak nesting 


A slightly odd 
looking sentence 


A slightly odd A slightly odd 
A slightly odd looking sentence looking sentence 
looking sentence 
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You may be thinking that browsers seem to handle the markup 
whether it’s invalid or not, so why should you bother with writing valid 
markup? The next section answers that question. 


Validation and why you should bother 


If browsers can cope just fine with invalid and even not-well-formed 
markup — and not only that, different browsers manage to do a similar 
job of rendering that invalid markup — why should you bother writing 
valid markup in the first place? There are at least three good reasons, 
as this section summarizes. 

First, even though things look the same when they're this simple, dif- 
ferences probably exist underneath. The earlier sidebar "Markup, 
parsing, and rendering" distinguished between the markup in the text 
file, the parsing of that markup into an internal structure by the 
browser, and the final rendering of that internal structure on the 
screen. In the screenshots at the end of the previous section, you saw 
the final result of the invalid markup for this fragment: 


<p><strong>A slightly <em>odd</strong> looking sentence</em></p> 
Although it looked the same in all four browsers, here are the internal 
trees they built. 


Firefox and Chrome Opera and IE 


Q © 
EDO 


Y 4 Y à 
A SLIGHTLY ODD @) SENTENCE ASLIGHTLY ODD C) 
LOOKING SENTENCE 


This example involves only three (or four) elements, and already there 
are cross-browser differences. The more complex the page becomes, 
the more likely invalid markup is to cause an oddity in rendering that’s 
hard to discover. This is especially true when CSS and JavaScript are 
involved. 


Moving on from this first point, browsers and other web tools are opti- 
mized for valid markup. Invalid markup is always dealt with as an 
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exception; this means browsers have to do extra work to parse and ren- 
der it, which ultimately means invalid pages are slower to render. Also, 
unless the particular structure of the invalid markup causes a browser 
or tool to crash, bugs in the parsing and rendering of invalid markup 
are less likely to be fixed than are those for valid markup. Subtle differ- 
ences in parsing and rendering between browsers will eventually lead 
to hard-to-discover cross-browser issues in web pages. 


Finally, especially when you're learning, it’s likely that you'll at some 
point ask for help with something that isn't working the way you 
expect. In most online communities that specialize in markup, the first 
thing you'll be asked to do is fix any invalid markup, or at least explain 
its existence. This is true for several reasons: 


^ As discussed in the previous point, invalid markup often leads to 
subtle issues. 


^ Error-checking tools are far more useful if they're pointing out one 
major error in your markup rather than the major error buried in 
hundreds of minor ones. 


^ If you haven't bothered to write valid markup, many members of 
these online communities will view you as not worth their time and 
effort to help. 


To summarize, the three reasons why you should write valid markup 
are as follows: 

Invalid markup leads to subtle differences in parsing and rendering. 
Browsers and development tools are optimized for valid markup. 

It’s easier to get help with valid markup. 

Or, looked at from the perspective of why not to write invalid markup, 
these three reasons can be rephrased: 

You make things harder for yourself. 

You make things harder for your tools. 

You make it harder for others to help you. 


You want to write valid markup, but how do you tell if your markup is 
valid? In the final section, you'll learn about tools you can use to check 
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your markup for errors as well as tools that will help you examine the 
results of your markup in the browser. With these tools, you'll be well 
equipped to learn more for yourself. 


Learning more 


In this chapter, you've learned enough to get you started with HTML. 
The best way to build on this foundation is to try things for yourself 
and see what happens. This section shows you some tools for doing this 
and resources for learning more. 


Web tools 


After you've written some markup, how can you tell if it’s correct? 
You've seen in this appendix that even when things look OK in the 
browser, there can be hidden problems that will eventually trip you up. 
Here are a couple of online tools that can help. 


The first tool is from the World Wide gums 
Web Consortium (W3C —the body ——— » 
that defines many web standards): 


http://validator.w3.org. этте 


This document was successfully checked as HTMLS! 
3 


This service checks that your markup 
is well formed and follows the rules 


described previously, such as no 
block-level elements as descendants 
of inline elements. You should try to 
fix any errors reported. 


The validator will check that your 


markup is technically correct, but it ras | 
D . . xD 
doesn’t concern itself with matters Tm 
of best practice. For this, you need a — 
linter like HTML Lint: http:// А - 
. . wa (o: н gue шы 
lint.brihten.com/html/. М : 
Errors reported by a linter are more 


concerned with matters of style than 


www.it-ebooks.info 


Learning more 465 


a validator, so it’s reasonable in some situations to ignore any advice 


given if you know what you're doing. But while you're still learning, 


it's all likely to be good advice. 


Browser tools 


In addition to websites to help you write markup, all major web brows- 


ers come with built-in tools for analyzing what's going on with your 
markup. These differ in the details but all work in broadly the same 


fashion. In this section the screenshots come from Opera but instruc- 


tions are given for all major browsers. 


The easiest way to activate the tools 
in Opera, Chrome, and Safari is to 
right-click the area of the page 
you're interested in and select 
Inspect Element. 


In Firefox, look for the Web 
Developer menu option, and select 
Inspect. You can activate IE's tools 
by pressing the F12 key or by 
selecting Developer Tools from 
the Tools menu. 


The tools open with a tree view of 
the markup, similar to the tree dia- 
grams in the opening sections of this 
appendix. Use this to highlight ele- 
ments you're interested in and check 
that the tree structure the browser 
has built corresponds to what you 
intended. 
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Resources and where to go for help 


This appendix has been a high-speed introduction to HTML. If your 
head is still spinning, here are some alternative resources that take 
things ata slightly slower pace: 


^ HTML Dog HTML Beginner Tutorial—www.htmldog.com/guides 
/htmlbeginner/ 
W3C Web Standards Curriculum —www.w3.org/wiki/Web_Standards 


. Curriculum 


When you're building pages of your own, you'll run into issues that 
aren't described in introductory material. When you have questions, 
these are good resources: 


Web Standards Group mailing list —http://webstandardsgroup.org/mail/ 
WebDesign-L mailing list —www.webdesign-l.com/ 
^ Doctype Qe?A website —http://doctype.com/ 


YOU SHOULD NOW KNOW ENOUGH ABOUT MARKUP TO GET STARTED 
CREATING YOUR OWN WEB PAGES. BUT EVEN WITH THE ODD IMAGE, THEY'LL 
BE A BIT DULL. YOU CAN ADD VISUAL EXCITEMENT TO YOUR WEB PAGES 
WITH CSS, WHICH YOU'LL LEARN ABOUT IN THE NEXT APPENDIX. 


www.it-ebooks.info 


CSS basics 


f you've just read appendix B, you're probably wondering how those 
rather dull textual examples end up looking like the beautiful web pages 
you see every day. The answer isn't some secret extra markup you didn't 
learn about yet, but Cascading Style Sheets (CSS). This appendix will 
introduce the main features of CSS, including 

© The basic syntax of CSS 

^ Using CSS selectors to apply styles only to certain elements 

© The most common properties and values 


© Using CSS for layout 


Rules, selectors, properties, and values 
A CSS style sheet is made up of rules. Here are three example CSS rules. 


ACSS RULE SELECTOR PROPERTY 


р { font-size: 1.4em; } em { color: teal; ) 


p { color: blue; ) 
DECLARATION VALUE 
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A CSS rule is made up of a selector and a semicolon-separated list of 


declarations inside brackets. Each declaration has a property and a 


value separated by a colon. If an element in an associated HTML docu- 
ment matches a selector in the style sheet, then the declarations will be 


applied to that element. 


To help you get the idea, here’s a full example page with a style sheet. 
The style sheet is in the head section of the document in a <style> ele- 


ment. There are three rules in the style sheet: a rule for the <body> ele- 


ment, a rule for the <p> element, and a rule for the <em> element: 


<!DOCTYPE һїт1> 
«html» 
«head» 
<title>Simple CSS Example</title> 
«style» 
body { 
font-family: "Komika 
Hand"; 
font-size: 250%; 
ү: 
pt 
color: blue; 
font-size: 1.4em; 
} 
em { 
color: teal; 
} 
</style> 
</head> 
<body> 
<p>A paragraph 
<em>with emphasis</em> 
</p> 
</body> 
</html> 
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If a second paragraph is added, it has the 


same style as the first paragraph because 
they both match the rule: A PARAGRAPH WITH 


<body> EMPHASIS 
<p>A paragraph 
<em>with emphasis</em> ANOTHER PARAGRAPH 
</p> 
<p>Another paragraph</p> 
</body> 


These are called type velectors because they 
match any element of the stated type. 


In the previous example, the style rules are included directly in the 
HTML inside a <style> element. This is just one way of applying CSS to 
your web pages; the next section will summarize the alternatives. 


Adding a style sheet to your HTML 
There are four ways to include CSS in HTML. At the lowest level, you 
can apply it directly to individual elements with the style attribute. 
This is known as an inline style: 


<p style="color: red;">Another paragraph</p> 


This rule makes just this one paragraph have red text, but it has no 
effect on any other paragraphs in your document. The limited impact 
of the style attribute means it’s the least efficient way of applying CSS; 
it’s usually only seen on elements unique within a site, when people are 
creating copy-and-paste widgets, or to work around a localized cross- 
browser issue. 


Slightly more useful is the <style> element used earlier. The <style> ele- 
ment should appear in the <head> element of the HTML document, 
although all popular browsers will use the styles if they’re added to the 
body instead. Rules in a <style> element apply to everything in that page: 


<style> p { color: red; } </style> 


The main benefit of this approach over inline styles is that you can con- 
trol the styles of multiple elements from a single rule, but they still only 
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affect the page on which they’re placed. On a multiple-page site, the 
rules would have to be included on every page, so it’s far more common 
to put all the CSS in a separate file and then link to it from each page. 
This <1іпк> element references an external style sheet: 
<link href="styles.css" rel="style sheet"> 
Whitespace in CSS 
The «style» element example is a more compact representation than used pre- 
viously: everything is on a single line instead of broken out into individual lines. 
It doesn't matter to the browser how the CSS is spaced—whitespace is ignored 
just as with HTML, but most human readers find it easier to read if the styles are 
broken up across multiple lines. 
Like the <style> element, the link should appear in the head of the doc- 
ument. The file styles.css would then contain the CSS: 
p { color: red; } 
This same CSS file can be used with every page on the site that links to 
it. Most browsers download style.css only once and then reuse it, sav- 
ing bandwidth and page-rendering speed. 
The final way to include CSS is to link from within existing CSS. This 
requires that some CSS has already been included, via a link or a 
<style> element: 
«style» @import url('styles.css'); </style> 
In this example, the style sheet is imported from a <style> element in 
the head section of the document. 
Inheritance 


One of the key properties of CSS is that styles are inherited down the 
document tree. In the simple example in the previous section, it’s already 
possible to see this feature in action. The font-family property is speci- 
fied only for the <body> element, but the elements in the document are 
displayed with the Komika Hand font from that rule. This is because all 
the other elements are children of the <body> element, so they inherit the 
font-family property. 
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font-family isn’t the only property that’s inherited. Неге are the rules 
for the <p> and <em> elements: 


p { color: blue; font-size: 1.4em; } 
em { color: teal; } 


T = 
THE P ELEMENT 
I$ Б ТАЕМ с > А PARAGRAPH WITH q. THE <em> ELEMENT 
ADBLUE и аы 
PHAS IS ALSO SIZE 14EM. 
EM 15 THE PROPERTY 
A INHERITS FROM 


THE <p> RULE. 


BUT THE <em> IS TEAL. THE 
PROPERTY FOR <em> 


OVERRIDES THE INHERITED 
VALUE FROM <p>. 


Inheritance means you don’t have to write style rules for every element 
in the document. Setting a font or a color on the <body> element usually 
means that all text in the document will be that font and color. To style 
specific elements, you need to learn how to write selectors; these will be 
covered in the next section. 


Selecting elements to style 


You learned in the previous section that a CSS rule consists of a selec- 
tor and a declaration. The declaration is the set of visual effects to be 
applied, and the selector determines what elements will be styled by the 
declaration. You saw some selectors in the previous section; they were 
examples of type selectors, where the selector consists of the element 
name and selects a type of element. But there are many other CSS 
selectors as well. In this section, you'll learn about ID and class selec- 
tors; using combinators to join selectors together for greater specificity; 
using pseudo-classes to select elements in particular states; and using 
media queries to target devices such as printers or cell phones. 


ID selectors 


An ID selector chooses an element based on the id attribute. This attri- 
bute should have a unique value in any given document, so an ID 
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selector will only ever apply to a single element and its descendants. 
An ID selector consists of a hash character followed by the id. In the 
following example, an element matching the ID selector will reverse 
the normal colors: white text on a black background instead of black 
text on white. 


#myelement { A PARAGRAPH 


color: white; 


background-color: black; ANOTHER 
: PARAGRAPH 


In the markup, only the element with the 
matching id attribute is selected: 


«p id="yourelement">A paragraph</p> 
«p id="myelement">Another paragraph</p> 


By themselves, ID selectors aren’t very useful. You certainly wouldn’t 
want to add an ID to every element you needed to style. They’re nor- 
mally used to pick out particular landmarks on a page. For a more gen- 
eral-purpose approach, it’s much better to use the class selector 
discussed in the next section. 


Class selectors 


The class selector chooses elements based on the class attribute. Unlike 
the id attribute, values in the class attribute don’t have to be unique 
throughout the document, so rules based on class selectors usually 
apply to a selection of elements in a document. A class selector consists 
of a period (.) followed by the class name and selects any element with 
the value myclass in the class attribute: 


.myclass { 
color: white; A PARAGRAPH 


background-color: black; 


} ANOTHER 


In this example, only one of the paragraphs PARAGRAPH 


has the myclass class: 


<p class="myclass">A paragraph</p> 
<p class="yourclass">Another paragraph</p> 
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The main benefit of a class selector over the 


ID selector is that multiple elements can А PARAGRAPH 
have the same class. Here, a third para- ANOTHER 
graph is added: PARAGRAPH 


<p class="myclass">A paragraph</p> 


«p class="yourclass">Another paragraph</p> ONE MORE 
<p class="myclass">One more paragraph</p> PARAGRAPH 


It's also possible to apply multiple classes to 
a single element. In the next example, the 
middle paragraph has two classes applied: 


«p class="myclass">A paragraph</p> 

<p class-"yourclass myclass">Another 
paragraph</p> 
«p class="yourclass">One more paragraph</p> ANOTHER 


PARAGRAPH 


The .myclass selector selects all the elements 


that have myclass as one of the values in the ONE. MORE 
class attribute. PARAGRAPH 


Although the previous examples use paragraph elements, it isn’t neces- 
sary for all elements with a particular class to be of the same type. This 
allows you to use the semantically correct element for a given bit of 
content but style related items uniformly. In the source code for this 
appendix, you'll find two additional examples of the class selector that 
demonstrate this: class-selectors-4.html and class-selectors-5.html. 


Now that you have a basic grasp of simple selectors, the next section 


will look at ways of combining them with combinators to make more 
complex selectors. 


Combinators 
Combinators allow simple selectors, like the element, ID, and class selec- 
tors in the previous sections, to be combined into more complex rules. 
This makes it easy to apply one style to «1ink» elements in the main con- 
tent but different styles to links in the navigation or the page footer. 
The most common combinator in CSS is the descendant combinator: a 
space between two simple selectors. For the selector to match the 
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rightmost element, that element must be a descendant of the previous 


element. This is easier to understand with an example. Consider this 


fragment of HTML: 


«h1»A <em>heading</em></h1> 
<p>A paragraph <em>with emphasis</em></p> 


Now look at these two style rules, both of which select <em> elements: 


em { color: teal; } 
p em { color: darkgreen; } 


The second rule selects only those <em> ele- 
ments that appear as children of a <p> ele- 
ment. In this example, the first <em> (a child of 
the <h1> element) is teal, but the second <em> 
(a child of the <p> element) is dark green. The 
second rule is more specific than the first one, 
so it will be preferred whenever both apply. 


A HEADING 


A PARAGRAPH WITH 
EMPHASIS 


More on this in the next section. In the meantime, you need to learn 


about the child combinator. 


The child combinator is a greater-than bracket: >. It allows you to select 


elements that are direct children of a parent. Because you can already 


select according to ancestor elements, you might be wondering why 


you also need a child combinator, so let’s look at an example. Here’s a 


simple HTML document: 


<header> 
<hi>Header</h1> 

</header> 

«article» 
<hi>Article</h1> 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
<footer>Article footer</footer> 

</article> 

<footer> 
Body footer 

</footer> 
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It has a header, an article, and a footer, but note that the <article> ele- 
ment also has its own footer. This lets you see the difference between 
the descendant and child combinators. 


pamai а eet i DESCENDANT 
' 1 COMBINATOR 
| HEADER i 

LI LI 

|m——————————— E 

Hur ee m TR І body footer { 

1 ARTICLE background-color: #000; 
f PARAGRAPH ! } 

1. PARAGRAPHZ. 

i 

LI 

LI 


І i І 
АР ао ы aes SELECTS EVERY FOOTER ! i 
„Тл ee ! 
EEE п OF BODY Lease лара E 
cw eS D UTE. AM СШ | 
i ARTICLE 
OPE i PARAGRAPH 1 
mm ў 
П 
П 
LI 


| \ THE CHILD 
\ 2 ) cOMBINATOR |22. 
background-color: #000; CHILDREN OF BODY 


} 


The child combinator is useful when you have nesting and the same 
element appears multiple times at different depths: for example, amenu 
made up from unordered lists where each item is itself an unordered 
list. With the child combinator, it’s easy to apply different styles to the 
top-level and lower-level items. 


Cascading and specificity 
The cascading part of Cascading Style Sheets refers to the rules that 
determine which of a set of competing rules apply to an element. This is 
important because multiple rules can have a definition that applies to 
the same property of the same element. 
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In case this isn’t making much sense to you, let’s look at an example. 
Here’s a basic style sheet: 


pt 
color: white; 
background-color: black; 
} 
Let’s link to it from the head of a document that also includes a <style> 
element: 
<head> 


<title>CSS Cascade 1</title> 
«link href="style-1.css" rel="stylesheet"> 
<style> 


pt 
color: black; 
background-color: white; 


H 
</style> 
</head> 


Notice that both the linked style sheet and the <style> element include 
a declaration for the color of paragraph elements. Which one should 
the browser use? The situation can be complicated further by adding a 
style attribute to a <p> element: 


<p>A paragraph</p> 

<p style="color: silver; background-color: gray;"> 
Another paragraph 

</p> 


As the screenshot shows, the browser 


т: e List it 
chooses the inline style on the element that . HE re 
b 4 o Nested item 
has one, rather than either of the styles in the o Nested itori 
head or the linked style sheet. Inline styles • List item 


always override linked style sheets and styles 
in the head; other rules are usually used in 
reverse order to which they're encountered. 
Try moving the <link> element after the 
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<style> element in this example, and you'll 
see that the rule in that file is then applied. 


But there is a complication. The last rule 


encountered is used only because the previ- 


ous rules used the same selector. If the selec- 
tor in the linked style sheet is changed, then 


this rule will win: 


body p 1 
color: white; 
background-color: black; 


1. List item 
2. List item 
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1. Nested item 
2. Nested item 


3. List item 


This rule wins because it has a higher specificity. The specificity is 
based on the selectors used in the rule. You can use this straightfor- 


ward process to calculate the specificity of any selector. 


Step Action 


#myelement em 


.myclass em 


body p em 


1 Count the number of ID selectors in 
the rule, and make a note of this 
value as a. 


2 Count the number of class selectors 
in the rule, and make a note of this 
value as b. 


3 Count the number of type selectors 
in the rule, and make a note of this 
value as c. 


4 Combine a, b, and c into a number 
where each letter represents a digit. 
The highest number is the most 
specific. 


a=1 


b=0 


101 


011 


003 


Any rule with an ID selector is more specific than any rule with just a 


class selector, which in turn is always more specific than any rule made 
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up of only type selectors. But within each group the number of selec- 
tors for each type is the significant factor. 


Pseudo-classes 


One of the original uses for JavaScript when it was introduced by 
Netscape back in 1995 was for rollover effects: changing a background 
image when the mouse pointer enters or leaves an element. Rather than 
require an entire scripting language for a simple visual effect like this, 
the ability to select elements based on user activity has been built into 
CSS with pseudo-classes. 


This example is a page with a para- 


file Edit View History Bookmarks 10015 Help 
graph element: TI is = 
HOVER ME 


<p>Hover me</p> 


By default, the paragraph is black 


text on a white background. 


The notation for a pseudo-class is a 


/ " 
Bile Edit View History Bookmarks pols Help 


colon followed by a keyword. For 6 Hover example 0 is z| 
rollover effects, the keyword is hover: Е! 


p:hover { background-color: #000; } 


This rule sets the background of the 
element to black when the mouse 


pointer hovers over the element. 


IT'S ALSO POSSIBLE TO USE PSELIDO-CLASSES WITH COMBINAT ORS, 
DEFINING RULES FOR CHILDREN OF AN ELEMENT DEPENDING ON ITS 
DYNAMIC STATE. SEVERAL INTERESTING EFFECTS ARE POSSIBLE ONLY 
WHEN YOU DO THIS. LET'S LOOK AT A SIMPLE EXAMPLE. 


C2 
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This snippet of markup might be part of a content management system. 
The idea is that the buttons allow the user to enable edit mode or delete 
the element: 


«article» 
«header» 
<hi>Article</h1> 
<menu> 
<button>Edit</button><button>DeLete</button> 
</menu> 
</header> 
</article> 


Most of the time, the menu needs to Е Hover example 1- Minefield 
file Edit View History Bookmarks 10015 Help 


be hidden so the user can see the end © Hover example 1 [= Y 
result more clearly. The menu is there- 


! [ 
А i | ' ' 
fore hidden with this CSS: ! 1 ARTICLE BR 
header menu { 3 : 
display: none; Us sca im v i араага c aT 4 


H k 


You'll learn more about the display 
property in the next section. 


With the menu hidden, there's no Hover example 1 Minefield 

: 2 file Edit View History Bookmarks Tools Help 
point adding the hover pseudo-class to rover ample 1 12 z 
that —the mouse pointer will never be 
able to hover over an element that 
isn't there. But the «header» element is pee 


visible, so here's a rule that makes the 


«menu» element visible when the mouse 


pointer is hovering over the «header» 


element: 


header:hover menu 1 
display: inline; 


j 
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This bit of CSS is the basis of most pop-up and drop-down menus on 
the web. The only requirement is that the element to be shown is a 
descendant of the element that will be hovered over. It lets you present 
extra information only when the user indicates they’re interested in it 
by putting the mouse pointer in that location. 


NOTE THAT THE hover PSELIDO-CLASS ASSUMES USERS ARE ACCESSING 
THE PAGE WITH A DESKTOP BROWSER AND LISING A MOLISE. FOR MANY 
POTENTIAL USERS, THIS ISN'T TRUE, INCLUDING PEOPLE WITH 
DISABILITIES AND USERS OF MOBILE OR TABLET DEVICES. 


You should now have a good grasp of the basic syntax involved in CSS 
and how to write selectors to pick out the required elements for styling. 
All that’s left to learn is the properties and values needed to create 


styles. 


Properties and values 


The interesting parts of CSS are the properties and values that cause 
the visible effects seen on the web page. The sheer variety of properties 
and values is such that entire books have been written about them. 
This section covers the most common values used in styling web pages. 


Colors and lengths 


The most common values in CSS are colors and lengths. A number of 
different properties accept either colors or lengths, or both, as values. 
This section gives a brief overview of them; then, in the following sec- 
tion, you'll learn about properties where they can be used. 


The previous sections have included several examples of color values. 
Mostly the examples have used color keywords such as black and red, 
because it’s obvious what these mean even to people who don’t know 
CSS, but there are several other ways to describe colors in CSS. These 
approaches are more flexible because they provide separate values for 
the amount of red, green, and blue that makes up the color. The follow- 
ing table shows the same colors expressed four different ways. 
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Name #rrggbb #rgb rgb(r,g,b) 
Black #000000 #000 rgb(0,0,0) 
Blue #0000ff #00f rgb(0,0,255) 
Red #ff0000 #f00 rgb(255,0,0) 
Yellow #ffff00 *ff0 rgb(255,255,0) 
Green #008000 - rgb(0,128,0) 
Teal #008080 - rgb(0,128,128) 
Silver #c0cOcO - rgb(192.192,192) 
Gray #808080 - rgb(128,128,128) 
White #ffffff #fff rgb(255,255,255) 


The middle two columns use hexadecimal notation. These are numbers 


in base 16: after getting to 9, the next number is A, then B, and so on, 


up to 


F. The hexadecimal value FF is equivalent to 255 in decimal. If 


the two numerals for each of the red, green, and blue values are the 


same, 


then you can use the shorthand notation in the third column. 


Color has its own property. The following example sets the foreground 


(text) color of an element and its descendants to blue: 


color: #00f; 


Lengths are less complicated than colors: they consist of a number fol- 


lowed by a unit. The most common units are shown in the next table. 


Unit | Measures by Description 

px Pixels Length in pixel units. The actual size is determined by monitor resolution. 
pt Points A measure from typography, equivalent to 1/72 of an inch. 

cm Centimeters Absolute length in centimeters. If you’re not in a metric country, you can 


em 


also use in for inches. 
Ems Size of the capital M in the current font. 


Percentage Length as a proportion of the size of the element's parent. 
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The next section looks at some common properties where these values 
are used. 


Borders and backgrounds 


Two of the most common things to style are borders and backgrounds. 
Each is controlled by several different CSS properties, and each has a 
shorthand notation that lets you set all the properties in a single line. 
This section looks at both of them, starting with borders. 


A border has a width, a type, and a color. All three can be set sepa- 
rately using the properties border-width (a length), border-style (a spe- 
cial property for borders), and border-color (a color, unsurprisingly): 


.one f -— — 
border-width: 5px; 
border-style: solid; I 
border-color: #999; 1 
h = = 
.two { 
border-width: 0.75em; 
border-style: dashed; 
border-color: #000; 
} 
The CSS above assumes that some elements 
with appropriate classes are defined: 
«div class="one"></div> Poccccccccces ' 
«div class="two"></div> 
<div class="three"></div> : 
«div class="four"></div> : 


. 
М 
йет еее еее еее а 


The shorthand notation uses the border ргор- 
erty. All that’s required is for the same three 
values to be listed with a space between: 


.three { 
border: 5pt dotted #333; 
} 
.four { 
border: 0.25cm double #666; 
} 
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Having both separate and shorthand properties is useful when you need 
to style a collection of elements similarly. For instance, if a page has a 
pop-up alert message that changes the border color according to the 
importance of the image, you can set the general style in one rule and 
override the border color with specific classes. If you later decide to cre- 
ate a thicker border on all message boxes, then only the general style 
needs to be updated rather than each rule for every level of importance. 


Backgrounds are slightly more complicated than borders because they 
allow the use of images, and these images can be positioned. 


Property Example values Description 
background-color red, #f00, rgb(255,0,0) Any valid color. 
background-image url(background. png) A link to an image. 
background-repeat repeat, no-repeat, Should the background image 

repeat-x, repeat-y tile across the background, or 


only appear once? 


background-position top left, 100px 200px, Where should the first back- 
50% 50% ground image be placed? 
background-attachment scroll, fixed Should the background scroll 


with the page or remain fixed 
behind the page? 


As with borders, background properties can be combined into a single 
property. The following example places a single copy of back- 
ground.png in the center of the element with the rest of the back- 
ground red: 


background: url(background.png) 50% 50% no-repeat fixed #f00; 


Now that you've learned the basics of visual styling, it’s time to move 
on to layout. To understand CSS layout, you first need to know how 
CSS describes the dimensions of elements using the box model. 
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The box model 


The CSS box model defines the dimensions of elements as they’re laid 
out on the page. In order to do page layout with CSS, as covered in the 
next section, it’s important to know how elements are sized. 


Elements have a width and 
PADDING height, padding, a border, and a 


ПЕ margin. The diagram at left 


shows how they fit together. 

: : The element’s width is either 

WIDTH defined explicitly or determined 

automatically by the browser 

based on the content and display mode. Between the content and the 

border is the padding; then you have the border (discussed in the pre- 

vious section), and finally the margin, which is the space between this 
element and the next one. 


The padding, border, and margin have associated collections of proper- 
ties in CSS. The width of each side can be applied separately, or you can 
use shorthand syntax. In the previous section, you saw the border-width: 
5px; shorthand. This could also be written in either of these two ways: 


border-width: 5px 5px 5px 5px; border-top-width: 5px; 
border-right-width: 5px; 
border-bottom-width: 5px; 
border-left-width: 5px; 


There are equivalent properties for the padding and margin: 


padding-width: 5px 5px 5px 5px; padding-top-width: 5px; 
padding-right-width: 5px; 
padding-bottom-width: 5px; 
padding-left-width: 5px; 


margin-width: 5px 5px 5px 5px; margin-top-width: 5px; 
margin-right-width: 5px; 
margin-bottom-width: 5px; 
margin-left-width: 5px; 
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The shorthand property lets you specify one to four lengths. The next 
diagram shows a practical example: 


padding: 20px 30px; 

border-width: 10px; 

margin: 20px 30px 40px 20px; 

If just one length is given, all four top, 
left, bottom, and right are set to that 
width. Two lengths set the top and bot- 
tom widths to the first value and the left 
and right to the second value. If three 


lengths are given, the first and last val- 
ues set the top and bottom, and both left 
and right are set to the second value. 
Finally, four values are applied in the 
order top, right, bottom, left. 


Quirks mode and Standards mode 

In the late 1990s, there was a lot of confusion about the correct way to 
implement CSS. This was particularly apparent in the way different 
browsers treated the box model. By the time understanding of the spec 
stabilized, several browsers were using incorrect approaches. Worse, 
many websites had been created that depended on the incorrect 
approach; when the designer is trying to make everything line up 
exactly, a difference of a few pixels in width is very visible. 


As new browsers were released, they wanted to implement the correct 
behavior, but they didn’t want to break the web by making all websites 
follow the new rule. To solve the problem, vendors created two render- 
ing modes in their new browsers: 


^ Standards mode — The browser displays according to the current stan- 
dards, as far as they're understood and can be implemented by the 
vendor. 

^ Quirks mode — The browser displays according to the incorrect rules 
implemented by previous versions of that browser. 
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There’s only one standard, so the way different browsers implement 
Standards mode has (sometimes slowly) converged on the correct 
implementation. But there are as many different ways to implement 
Quirks mode as there are old versions of browsers, so pages that ren- 
der in Quirks mode can vary wildly even among modern browsers. 


In order to decide whether to use Quirks mode or Standards mode, the 
browser takes various hints from the HTML. This also varies from 
browser to browser; but, broadly, documents that follow the stan- 
dards—which have correct markup according to the HTML4 or 
ХНТМІЛ specs—use Standards mode. Pages that don’t follow the 
standards, or claim to be following earlier versions of HTML, use 
Quirks mode. 


Generally this has worked pretty well. Web authors creating new 
pages and paying attention to their markup have their pages rendered 
as they expect, and old pages or pages created by unskilled authors are 
rendered as expected (by users who have the same browser as the 
designer, at least). 


The situation has added complexity to the task of improving from an 
unskilled to a skilled web author. Some errors in your markup won't 
trigger Quirks mode, but other errors of apparently similar complexity 
will. Authors may make small changes in their code only to have unex- 
pectedly large changes in the end results. This inconsistency can be 
frustrating and is one of the main reasons cross-browser web authoring 
has gained a reputation for being confusing and capricious. 


Right now, you need to understand that if you're seeing markedly dif- 
ferent results for the same page across several modern browsers, it's 
likely you've accidentally triggered Quirks mode through an error in 
markup. The solution is usually to run your markup through one of the 
online validators and correct any errors reported. 


Display modes: inline, block, and none 


Appendix B discussed the difference between block and inline ele- 
ments. In addition to being a way to categorize HTML elements, these 
also assume a default visual presentation. Inline elements sit in the flow 
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of text, whereas block elements cause line breaks before and after. This 
visual presentation can also be controlled by CSS through the display 
property by setting the value to either inline or block. 


A simple example will illustrate the key differences. Here are three 


<div> elements: 


<div>1</div> <div>2</div> <div>3</div> 


The following styles show the elements’ position and shape: 


div { 
width: 2.5em; 
height: 2.5em; 
margin: 0.5em; 
padding: 0.5em; 
border: 5px dashed black; 


Setting the display property to block causes all V 
! 


three elements to sit on а line by themselves, | 1 | 

each with the width, height, padding, and mar- TENE 

gin specified: сет"! 

А I 

div ( display: block; } I 2 І 

] 

Of course, a <div> element is display: block by Е 

АИ МЕЦ ЕГ i 

default, so explicitly stating it in CSS isn’t nec- 13 I 

essary. | i 
Setting the <div> elements to display: inline a on E E : 
b drastic effect: 1]! 121 131 
as a drastic effect: La d tila 


div { display: inline; } 


Not only are the elements now sitting on the 
same line, but they're considerably smaller. 
This is because the width and height properties 
don't apply to inline elements, so each <div> is 
now the size of its content plus the margin 
specified. 
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Other values are allowed for the display property. Several are covered 
in chapter 8, but one you've seen used in this appendix is none. In the 
section on pseudo-classes, it was used to hide elements until the user 
hovered over a particular area on the screen. 


Now that you've learned about the box model and display modes, you 
have all the prerequisite knowledge required for page layout. 


Fositioning and layout 


In the last 10 years, most CSS layouts have been built around floated 
elements, commonly referred to as floats. A floated element is one that’s 
outside of the normal flow of text, like a cutout. The text flows around 
these floated elements as long as there’s room, as illustrated by the fol- 
lowing diagram. 


Originally, floated elements were intended to be pictures, tables, and 
figures sitting in single columns of text, but people soon figured out 
that floats could be used to lay out entire pages. 


Floats rely on two CSS properties: float and clear. The float property 
determines which side the element floats to, whereas the clear property 
determines how the element behaves with respect to other floated ele- 
ments. Values for float are left, right, and none; values for clear are 
left, right, both, and none. 
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If two consecutive elements are floated the same way and not cleared, 


then as long as there’s available width, they sit alongside each other. 


But if the second has clear set, it drops below the first element. 


Let’s create this simple layout with 
CSS floats. The sidebar is floated left, 


the main content is floated right, and 


the footer is set to clear both of them. 


Widths are set on the sidebar and the 
main content to ensure that there's 
room for them to sit side by side. 


The markup and CSS for this layout 
follow. Some additional CSS is used, 
but not shown, to add borders, 
margin, and padding to the elements. 
Copy the code from the earlier 


examples if you're following along: 


«div id="header"> 
«img src="dust-—puppy.svg"> 
<h1>Heading</h1> 

</div> 

<div id="main"> 
<p>I never am really 
satisfied. ..</p> 


</div> 

<div id="sidebar"> 
Side bar 

</div> 


«div id="footer"> 
«div id="nav"> 
«a href="/11">Link 1</a> 
«a href="/12">Link 2«/a» 
«/div» 
«div id="smallprint">Credits</div> 
«/div» 


www.it-ebooks.info 


quee mc mcm s m c C m mc o ee aa ы | 

1 

HEADING Ке | 

[ 

——rr IR al 

n= >= at all 1 
SIDEBAR 1 

Llames =! " INEVERAMREALLY SATISFIED THAT I ! 

UNDERSTAND ANYTHING: BECAUSE. Ц 

l UNDERSTAND IT WELL ASIMAY.My 1 

! COMPREHENSION CAN ONLY BE AN П 

' 


V INFINITESIMAL FRACTION OF ALL 1 

1 WANT TO UNDERSTAND ABOUT THE MANY 1 
1 CONNECTIONS AND RELATIONS WHICH | 
1 OCCUR TO ME, HOW THE MATTER IN 1 
1 QUESTION WAS FIRST THOUGHT OF OR | 
1 ARRIVED AT, ETC. ETC. П 


#header img { 
float: right; 

} 

#header һ1 { 
margin-right: 150px; 


} 

#main { 
float: right; 
width: 60%; 

} 

#sidebar { 
float: left; 
width: 2526; 

} 

#footer { 
clear: both; 

} 


#footer > div { 
display: inline; 
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Note that the <footer> element needs to have clear set even though it’s 
not floated. Nonfloated elements must also be cleared if they appear 
below any floated elements; otherwise the floated elements will overlap 
them. In this case, the footer would appear directly below the previous 
nonfloated element, the header. 


There’s plenty more to CSS layout than this simple example can dem- 
onstrate, but you now know the basics. As you see more complex lay- 
outs and advanced approaches, you should be able to use the 
knowledge you've gained here to work out what's going on. 


NOW YOU'RE LIP TO SPEED WITH CSS, IT'S TIME TO MOVE ON TO THE THIRD KEY 
WEB DEVELOPMENT TECHNOLOGY: JAVASCRIPT. WHEREAS HTML AND CSS ARE 
NATURALLY FIXED AFTER THEY'RE CREATED AT THE SERVER, JAVASCRIPT 
ALLOWS YOU TO MANIPULATE WEB PAGES IN THE BROWSER ITSELF. THE NEXT 
APPENDIX WILL GET YOU STARTED CREATING THESE "DYNAMIC" WEB PAGES. 
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he main focus of this book is HTML5 and CSS3, but to take full advantage 
of many of the features of these two technologies you'll end up using 
JavaScript quite a lot. The APIs in НТМІ5 are accessible through 
JavaScript, and the techniques you've seen for detecting HTML5 and 
CSS3 support depend on JavaScript. 


The goal of this appendix isn't to teach you to be a great JavaScript pro- 
grammer even if you've never programmed before, but to teach you 
enough syntax that you can recognize what the examples in the book are 
trying to do and enough practical knowledge that you can experiment on 
your own to learn more. 


Setting up an interactive console 
In this appendix, you'll learn by doing. To do that, you need a way to type 


JavaScript code into your browser and immediately see the results. Most 
modern browsers come with a built-in facility for this as part of their 
developer tools. 
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Chrome (and Safari) 


Chrome and Safari are both based on the WebKit browsing engine, so 


apart from some stylistic differences, their developer tools are identical. 


Access the developer tools by right- emphasis 
ee Back 
clicking any element on the page and 
selecting the Inspect Element option. Reload 
Save As... 
Print... 


Translate to English 
View Page Source 
View Page Info 


Inspect Element 


A panel opens at the bottom of the browser window like the one shown 
here. 


L Бетеп! 9) Resources Q nemo Te sees Qe & оез ov [оў Console [а 


> Computed Style 
v Styles 
elesent.style ( 


) 


i, cite, em, var, address ( 
font-style: italic; 

} 

> Metrics 

> Properties 


Look for the Console button in the toolbar 
across the top of the panel, and click it. a n oe 
к 


You should see a command prompt > anda Se 


>I 


cursor. You can type in JavaScript and see 
it executed immediately. 


www.it-ebooks.info 


Setting up an interactive console 493 


Here are the key features of the Chrome console. All the examples in 
this appendix should work in Chrome. 


YOUR INPUT APPEARS CHROME. CONSOLE 


ALONGSIDE ARROWS see, 
POINTING RIGHT. "HB > 1+ 1; OUTPUT APPEARS 
"els 2 TOT ON ALINE BY 
LC p > hello; ITSELF. 
Ө > ReferenceError: hello is not defined 
E 
ERRORS ARE INDICATED 
BY AN X. 
Firefox 


Thanks to its extensible nature, Firefox has long relied on add-ons to fill 
the developer tool gap, notably Firebug (discussed in a moment). Newer 
versions of Firefox (since version 8) have developer tools built in. 


Access these tools from the main New Tab | Bookmarks 55 gj. 
Start Private Browsing History > 
menu under Web Developer. For Downloads 
now, either select Web Console or Find eee 
eferences » 
press Ctrl+Shift+K. Pierii Help 
Print. > 
Е 77 1 Web КЕС 
Full Screen DOM Inspector \ 
SetUp S Scratchpad Shift«F4 
N t PONES View Page Source Cui-u 
ы Error Console Ctrl+Shift+) 
The console monitors four things by =  ~. 


default: network requests (Net), CSS, 

JavaScript (JS), and console logging 

(Web Developer or Logging in newer 

versions). You can turn them on and — 
off individually by clicking the but- 

tons along the top of the console. In 

this appendix, you may find it helpful 

to turn off everything except Java- 

Script and console logging. 


www.it-ebooks.info 


494 APPENDIX D JavaScript 


The next figure shows the key details of the Firefox console. Most of 
the screenshots in the following sections were taken using Firefox. 


FIREFOX CONSOLE 


YOUR INPUT APPEARS l n-ar : +1; нЕт OUTPUT APPEARS 
ALONGSIDE ARROWS 71, NI - AFTER AN ARROW 
POINTING LEFT. » POINTING RIGHT. 


ReferenceError: hello is not defined 


*s._ ERRORS ARE INDICATED 
BY AN X. 


Other browsers 


Several other browsers ought to work equally well. Here's how you get 
to the console in them: 


^ Internet Explorer — Press F12, or look for developer tools in the Page 
menu. 


^ Opera — Right-click the page, and choose Inspect Element from the 


context menu. 


^ Firefox with Firebug — Press F12, or right-click and select Inspect with 
Firebug from the context menu. 


NOW THAT YOU KNOW HOW TO EXECUTE JAVASCRIPT IN YOUR BROWSER OF CHOICE, 
IT'S TIME TO START LEARNING SOME JAVASCRIPT. YOU'LL BEGIN WITH ARITHMETIC 
AND STORING THE RESULTS. OVER A FEW SHORT PAGES, THESE SIMPLE OPERATIONS 
WILL BUILD UP TO PROGRAMS THAT CAN DO USEFUL THINGS IN YOUR WEB PAGES. 


Arithmetic and variables 


A computer program is based on math. It boils down to a sequence of 
mathematical operations on a collection of numbers. If you've always 
been bad at math, don’t let this frighten you: programming —the act of 
composing a program —has as much in common with writing a story as 
it does with solving math problems (albeit a story written with unusu- 
ally strict grammar and far more punctuation then you're used to). 
Think of it as an obscure subgenre of science fiction. But the simplest 


www.it-ebooks.info 


Arithmetic and variables 495 


programs that can be written are basic mathematical statements, so 
we'll start with them. Open the JavaScript console in your preferred 
web browser, and follow along with the examples. 


Arithmetic 


In this section, you'll learn how basic arithmetic operations are repre- 
sented in JavaScript. The examples are all shown in the Firefox Web 
Console, but you should see the same results in any other browser. 


Basic addition, subtraction, multiplication, 


and division are written in much the same х |mNet v|acss vais x 
way as they were in your high school 2+2; 
book. The asterisk (*) is used to indicate : d 
multiplication and the forward slash (/) 0 
division. Expressions and their values are : is: 
shown in the console output. Try typing a 2/2; 

few expressions and pressing Enter. 1 
Programmers refer to numbers as operands Г ни 


and symbols as operators. The entire com- 

bination is called an expression. A sequence of expressions terminated 
by a semicolon is a statement. The following diagram should help you 
get the vocabulary straight. 


OPERATOR STATEMENT 
Y DR 
2+ 2; 2+ 2 ; 
4 N ME 
OPERAND OPERAND ' 
EXPRESSION 


Any number of operands and operators can be chained together, but 
they’re not evaluated left to right. Some operators are more important 
than others and are always evaluated first. 
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In the first example, the multiplica- aa orm eem 
E | [аС55 у|=)5 У амер 
tion is performed before the addi- Г 
tion, so the result is 8. The 8 

| > ОР ((2 + 2) +2) * 2; 
terminology is that multiplication i2 


has a higher precedence than addition. 


To explicitly control the order of 
evaluation, you can use parentheses 
to group operations. The second 
example shows a forced left-to-right 
evaluation. 


In addition to adding numbers, the + CSS. V, |шуѕ:м |mLogging Y 


operator can add text together. Text “Hello!” + ° HIMLS + " and" + * CSS" 
А А "Hello! HTMLS and CSS3* 
values in a JavaScript program are ‘Hello!’ +” IMS" + and" + * CSS3'; 
E š “Hello! HTMLS and CSS3* 
referred to as strings. Strings are "Hello!" + " HTML" +5 + © and" + " CSS" + 3; 
. “Hello! HTMLS and CSS3* 
always demarcated by either double "HIM.S" * "CSS3*; 


NaN 
or single quotes —1t doesn't matter 


which as long they're used in pairs, 
as the first two examples show. 


Strings and numbers can be added 
to each other in certain circum- 
stances, although using any of the 
other arithmetic operators with 
strings leads to a not-a-number 


(NaN) result. 


If the string is also a number, it can be used with normal arithmetic 
operations, but the results won't always be what you expect. Java- 
Script makes up its own mind about whether you mean arithmetic or 
string addition. 


In the first two examples, string addition is 
used rather than numeric, because addition 
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can be performed on both numbers and "2"+"2"; 
strings and one of the operands is a string. a i Р 
А 
The multiplication operation can only be ra 8 
used with numbers, so the strings аге соп- 4 
"2**"2 


verted automatically to numbers. 


THE AUTOMATIC CONVERSION OF NUMBERS TO STRINGS CAN LEAD TO SOME 
UNEXPECTED AND UNWANTED BEHAVIOR, OR BLIGS IN PROGRAMMER PARLANCE, IN 
YOUR JAVASCRIPT PROGRAMS. IN THE SECTION “BRANCHING AND LOOPING.” 
YOU'LL LEARN HOW TO FORCE YOUR OPERAND TO BE A NUMBER. 


ЧР 


Comparisons 
Comparisons are operators that produce a true or false value, otherwise 
known as a Boolean value. Comparison operators are crucial when it 
comes to branching and looping (see “Branching and looping”). There 
are general-purpose comparison operators as well as several operators 
that are intended for Boolean values. The three main Boolean opera- 
tors are as follows: 


&& AND Returns true if both oper- true ЕЕ false; 
ands are true false 
true || false; 
. . true 
E OR Returns true if either oper- true; 
and is true false 
!false; 
true 


NOT Returns true if its operand 
is false 


Experiment with these operators in the 
console until you're comfortable with these 
meanings. 
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You can compare two values for equality true != false; 
with these operators: true 
true == !false; 
true 
= EQUAL Returns true if both ! (true == false); 
d h true 
operands are the same TT 
true 
l= NOT Returns true if the ! (true || false); 
А false 
EQUAL operands are different 
Note that if you begin comparing things of 
different types, you may get unexpected 
results. 
Because JavaScript helpfully converts "HTML" == "HTML"; 
types for you, the equality operators aren't Erue 
М == 2; 
always reliable. КЕПЕ 
2 == "2"; 
— IDENTICAL Returns true if the true 
operands are the same itas ы. 
туре and have the 


same value 


Again, if you compare things of different 
types, you may get unexpected results. In 
the example here, 2 == "2" (comparing an 
integer with a string) evaluates to true, 
since JavaScript converts the integer 2 to 
a string "2" before comparison. But 2 === 
"2" evaluates to false because an integer is 
not a string. 
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You can check whether something is 1 < 2; 
smaller ог larger than another thing: нра 
* 2: 
< LESS Returns true if the first false 
THAN value is less than the ind ed 
second value "HTML" « "SVG"; 
true 
> GREATER Returns true if the first 
THAN value is greater than the 
second value 

When you compare strings with < and >, ТИР 
JavaScript takes the numeric value of the false 
characters and compares them. This means "В" € 567 
His greater than C, but Н is less than с, ue 
because lowercase letters are all larger 
than uppercase letters for comparison pur- 
poses. As with the arithmetic operations 
you saw earlier, bugs can occur if you're 
expecting to compare numbers but in real- 
ity are comparing strings. JavaScript 
doesn’t complain in either case. 
You can also compare smaller and larger —s 
and equal to: false 

2 <= 2; 
БЕ va OR Returns true if the е 2; 

first value is less true 


than or equal to the 
second value 


>= GREATER THAN 


OR EQUAL TO Returns true if the 


first value is greater 
than or equal to the 
second value 
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Now you can perform arithmetic and comparisons, but what can you 
do with them? Comparisons are used extensively in branching and 
looping, which we'll examine in the section "Branching and looping," 
but if you compare the same fixed values in your program you'll see the 
same results every time. You need to store variable factors in the pro- 
gram so you can provide different results according to different start- 
ing conditions: you need variables. 


Variables 


A variable is a place to store the result of a calculation. If you remem- 
ber any of your high school algebra, the concept of a variable ought to 


be somewhat familiar. You may remember algebra problems something 


like this: 


5=2+xX 


In math, working out the variable’s value results in the answer. In this 
case, it’s clear that x = 3. But in JavaScript, you express it like this: 


var x = 5 = 2; 


This code is saying “Create a storage space called x; calculate the result 
of 5 — 2; store the result in the storage space called x. The var keyword 
allocates a variable.” 


After you've stored a value in a vari- магх = 5 - 2; 
able, you can use it in another calcu- ancetaned 

А : . var у = 2 + 2; 
lation, as shown here. First a value is undefined 
assigned to x and then to у, and then var z = х * у; 
h à bl d d i undefined 
the variables x and y are used Ina console. log(z) ; 
calculation that assigns a value to z. 12 


[> undefined 
The сопѕо1е.109(2) statement is an 


example of calling a method on an 
object. For now, you don’t need to 
know what that means (you'll learn 
more in the section “Functions and 
objects”); just be aware that it prints 
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out the current value of whatever 
variable you put in the brackets. 


Unlike in algebra, you have to define 
all the variables that appear on the 
right side of the equals sign before 
you use them. The sequence of oper- 
ations here shows what happens if 
you don't. 


When JavaScript can't understand 
your code or is unable to execute it, 
an error occurs. Usually this immedi- 
ately stops the execution of whatever 
program is running. You can see in 
this example that the error that c 
isn't defined wasn't discovered until 
b was defined, because the initial 
error stopped execution. 


After you create a variable, you can 
assign it a new value at any time. 
When you use the variable in a cal- 
culation that assigns a new value to 
itself, remember that the assignment 
operator sets the new value, and that 
always happens last —the value isn't 
updated until the end of the 
calculation. 


If you put a number in a variable, 
nothing stops you from adding a 
string to it. But as with previous situ- 
ations where JavaScript is equally 
happy with a string or a number, this 
can lead to confusing errors. 
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var a 
Refer 
var b 
undef 
var a 
Refer 
var c 
undef 
var a 
undef 
conso 
7 

undef 


var 
unde 
а = 
8 
а = 
"HTM 
a = 
NaN 


=b+c; 
enceError: 
= 3; 
ined 
= +С; 
епсеЕггог: 
= 4; 
ined 
= р + с; 
ined 
le. log(a) ; 


ined 


а = 2; 
fined 
a*a*a; 


"HTMLS"; 
L5” 
a*a*a; 


b is not defined 


c is not defined 


502 


C2 


AFFENDIX D JavaScript 


YOU'VE GAINED SOME FAMILIARITY WITH VARIABLES, BUT YOU 


SHOULD KNOW ABOUT A FEW MORE OPERATORS. THESE OPERATORS 
DON'T HAVE ANY ANALOGUE IN ARITHMETIC; THEY'RE ONLY USEFUL 


WHEN YOU HAVE VALUES STORED IN A VARIABLE. 


Special operators for variables 


Two operators that won't be familiar to you 
from school arithmetic are the post- 
increment (++) and post-decrement (—) opera- 
tors. They increase and decrease, respec- 
tively, the value of a number by one. Post 
means they perform the change after the 
value has been used in an expression. 


Study the sequence of operations in this 
screenshot. Notice that the values assigned 
to a and b are those of i before the incre- 
ment or decrement. 


You also need to know about the += opera- 
tor and its relatives. 


The need to store the result of an expres- 
sion into a variable when it's one of the 
operands is so common that a shortcut is 
built into JavaScript. Instead of writing 


a=a+b; 
you can write 
a += b; 


This works for the other arithmetic opera- 
tors, as you can see in the screenshot. 
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var i = 0; 
undefined 
console. log(i); 
0 

undefined 

var a = i++; 
undefined 
console. log(a); 
0 

undefined 
console. log(i); 
1 

undefined 

var b = і--; 
undefined 
console. log(b); 
1 

undefined 
console. log(i); 
0 

undefined 


var a=2,b=3; 
undefined 
а += b; 


var s = 'H'; 
undefined 

S += 'el'; 
"Hel" 

S += 'lo'; 
"Hello" 
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In this section, you've learned IN PROGRAMMING, WE CALL 


i CHOOSING BETWEEN 

how to do calculations and com- DIFFERENT ACTIONS 
. A h lts; BRANCHING AND REPEATING 
parisons and store the results ın ACTIONS LOOPING. YOU'LL 
Н * LEARN ABOUT THEM IN THE 
variables. That is fundamental to NEXT SECTION. 


writing programs but not very 
useful by itself. You need to be able to take different actions depending 
on the results, or perform actions repeatedly to make it worth your 
while to write a program in the first place. 


Branching and looping 


If your program did some calculations and always produced the same 
output, there wouldn't be a point to it. A program can't do much unless 
it can make decisions based on the variables being passed into it. When 
a program executes one block of code rather than another based on the 
value of a variable, that's what we call branching. Looping is a related 
concept: executing a block of code multiple times. In this section, you'll 
step back from the console for a few 


pages and learn about the various pers pa E 
1 1 1 5ТАТЕМЕМТ5 
branching and looping alae in CONTAINED 
JavaScript so that in the following WITHIN BRACES S 
А › LIKE THESE: { }. 
sections you can see how they re used. l | 


The term branching, unsurprisingly, comes from an analogy to a tree 
branch. Imagine you're walking along the branch of a tree: eventually 
you come to a point where it divides into two. You can choose to go up 
one branch or the other one. That's all branching is in programming — 
choosing to go one way or another. The simplest branching construct is 
the if statement. 


NELLE A CONDITION THAT 
DO THIS IF THE кш ° EVALUATES TO A 
CONDITION IS TRUE. ; BOOLEAN. 


D 


\ if (x %2 = 0) { 
БЕ » console. Log('Even'); 
2e) else { 


Й 


Li console.log('Odd'); <... 
} 1 
' DO THIS IF THE 
THE else Т5 OPTIONAL. CONDITION IS FALSE. 
REMOVE EVERYTHING AFTER THE BRACKET 
IF NO ACTION IS REQUIRED. 
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If you need to check for more than one condition, you can nest the 


if...else statements. 


THE FIRST CONDITION 


2 


» IS THE SAME AS BEFORE. 


if (y % 2 == 0) { 
console. log('Even'); 
} else if (y % 3 == 0) 1 
-"" console.log('Divisible by 3'); 
Fi } else { 
1 console.log('Not a multiple'); 


IF THE CONDITION 
IS FALSE, CHECK 
ANOTHER CONDITION. 


An alternative to if...then...else is the switch statement. It lets you 
choose from a long list of alternatives based on the value of a variable. 
It doesn't allow the flexibility of if...then...else in comparison opera- 
tions but does offer a more easily comprehensible way of presenting 


multiple choices. 


INSIDE THE BRACKETS THIS IS AN EXAMPLE OF 
IS AVARIABLE TO BE p A METHOD ON AN 
TESTED. ` E OBJECT. MORE IN 
EN ," "FUNCTIONS AND OBJECTS.” 
. b 4 
switch (z.toLowerCase()) { 
THE VARIABLE „у case "eat me": 
PASSED INIS .-" console.log('Grow'); 
COMPAREDTO .. break; СЦ 
EACH OF THE м ts TR TU. 
CASES IN TURN. case "drink me": . EACH CASE 
console.log('Shrink'); n y) ed 
po T e BY A f 
break; PO ra 
default: : 
IF NONE OF THE "d console.log('Why is a' z 
CASES MATCH, ~ +' raven like a' rd 
THE DEFAULT + 'writing desk?'); Qe 
IS USED. EIEIO Л, Uo uer 
break; 0-27 
} 
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That’s all you need to know about branching, so on to looping. Looping 
lets you repeat an operation multiple times. The most common loop is 


for. 
LOOP WHILE THIS 
EXPRESSION IS TRUE. INCREMENT THE. 
STARTING STATE H .-* VARIABLE AFTER 
EN i ^/ EVERY LOOP. 
4 Y Y 
for (var i = 0; 1 < 10; i++) { 
APIS »- console.log('Loop ' + i); 
i } 
STATEMENT BLOCK TO 
REPEAT 
This screenshot shows the output J for(var i = 0; i < 16; im) { console. logt Loop ^ 
. Loop 0 
in the console from the for loop. It Loop 1 
" & Loop 2 
logs 10 lines, counting up from 0 Loop 3 
. Loop 4 
to 9. This is the normal program- Loop 5 
" а Loop 6 
mer way of counting 10 things, Loop 7 
a А Loop 8 
starting at 0, so get used to it! i Loop P 
undefined 


It’s also normal to use the loop 
index variable, i in this case, to 
modify the code’s behavior on each 
iteration through the loop. 


+i); } 


An alternative to the for loop is the while loop. As you can see from the 


following diagram, it has all the same features as the for loop, but the 


arrangement is slightly different. 


STARTING STATE LOOP WHILE THIS 


*. . ,' EXPRESSION IS TRUE. 
`> var 1 = 0; Б” 


while (i < 10) { 


STATEMENT BLOCK ------ » console.log('Loop ' + i); 
TO REPEAT . 
1 += 2; 
} k INCREMENT THE 
~-- VARIABLE AFTER 
EVERY LOOP. 
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This screenshot shows the out- | var i = 0; while (i < 18) { console.log('Loop ' + i); i += 2; } 
Loop 0 

put in the console from the Loop 2 
оор 

while loop. Incrementing by Loop 6 


two each time through the loop е» 


means only five iterations. 


You would normally use a while loop when you weren’t sure how many 
iterations (trips through the loop) were required. Whereas the for loop 
always counts from something to something, a while loop does as many 
or as few iterations as required. For instance, if you had a collection of 
10,000 numbers and wanted to find the first one that was even, you 
would use a while loop because you would expect to find an even num- 
ber in the first few you looked at. 


There's a variation on the while loop called the do. . .wnite loop. As you 
can see in the next diagram, it’s similar to the while loop; the main differ- 
ence is that the test to see whether the loop should continue is at the end. 


STARTING STATE 


"Ue var i = 0; 


do { 
STATEMENT BLOCK ------ » console.log('Loop ' + i); 
TO REPEAT . 
1 += 2; —4-------... | 
} while (i < 10) INCREMENT THE. 
VARIABLE AFTER 
b EVERY LOOP. 
LOOP WHILE THIS 
EXPRESSION IS TRUE. 
The previous do. .-while loop І var і = 0; do { console.log('Loop ' + i); i += 2; } while ( i < 10 ) 
Loop 0 
Loop 2 
produces exactly the same oe : 
output as the earlier while ne 
loop. For a large number of Irs 


iterations, this will always be 
true. The main difference 
comes when the while loop 
may not be executed at all. 
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Following on the left is a while loop; on the right is a do...while loop 
with the same code block and test expression. You can see from the 
console output that the while loop doesn’t execute its code block 
because the test expression is false. But the do...while loop does exe- 
cute its code block, because the test expression isn’t checked until the 


end of the loop. 
while (false) { do { 

console. log('Loop'); console. Log('Loop'); 
H ) while (false) 


while (false) ( console.log('Loop'); } [ < do { console.log('Loop'); } while (false) 
undefined Loop 
[> undefined 


The loop never executes if the The loop always executes at least 
condition expression evaluatesto ^ once. 
false. 


YOU NOW KNOW ABOUT ALL THE LOOP TYPES IN JAVASCRIPT BUT ONE. 
THE FINAL LOOP TYPE IS for...in, BUT IT'S ONLY USEFUL WITH м. 
OBJECTS. YOU'LL LEARN ABOUT OBJECTS IN THE NEXT SECTION. 


Functions and objects 
So far, we've covered basic arithmetic operations and comparisons, 
variables in which to store results of those operations, and structures 
that allow you to control program flow based on variables and compar- 
isons. Next you need to learn how to structure those components into 
complete programs. This is where functions and objects come in. 


Functions 
A function takes input, transforms it in some way, and produces out- 
put. Here's an example. 
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ALABEL GIVES 
THE FUNCTION А 
THE function KEYWORD NAME. , 
INDICATES A FUNCTION H du 
DECLARATION. ~, i E 
Ua. Y y 


function dblMe(n) { 


THE PLACEHOLDER FOR 


THE DATA TO BE PASSED 


INTO THE FUNCTION, 
CALLED THE PARAMETER 
GOES IN PARENTHESES. 


THE return KEYWORD  ..... » return 2 * n; N 
ENDS THE FUNCTION } Ј 
AND SENDS А VALUE ` 
ВАСК. е... | 

`` THE CODE TO ВЕ EXECUTED (THE 

FUNCTION BODY) IS PLACED 

BETWEEN BRACES. 


This function is short enough that 
you can experiment with it in the 
console. To run the code in the 
function (or call the function, as a 
developer would say), you use the 
function name followed by paren- 
theses containing the argument 
you want to pass. The argument is 
assigned to the parameter within 


the function body. 


function dblMe(n) { return 2 * n; } 
undefined 

dblMe(2); 

4 

dblMe(3); 

6 


It's worth explaining that again: the parameter is the placeholder in the 


function definition. The argument is the value passed into the function 


when it's called. In practice, people ignore this subtle distinction and 


use the two terms interchangeably; we'll try to keep them straight, but 


don't worry about the difference too much. 


Real functions generally contain more complex logic, but the examples 


here are short so it's feasible for you to type them into the console. 


Here's a slightly more complex example. 


function evenMe(n) ( if (n $ 2 == 1) { return n + 1; } else { return n; } } 


undefined 
evenMe(2) ; 
2 
evenMe(3) ; 
4 


www.it-ebooks.info 


Functions and objects 509 


When you write your own functions, it’s more common to put each 
operation on a single line, like this: 


function evenMe(n) { 
if (n % 2 == 1) { 
return n + 1; 
} else { 
return п; 


} 


But JavaScript, like HTML, doesn’t care about whitespace; that just 
makes it easier for humans to read. It works no matter how many lines 
it takes up, but for the console you need to get everything onto one line. 
Functions can take more than one argument. 


function baseMe(n,a) ( while (n % a != 0) { ne; }; return n; } 
undefined 

baseMe(3,3); 

3 

baseMe(4,3); 

6 

baseMe(5,3); 

6 


Here’s the previous function written in a more conventional style to 
make it easier to read. The function rounds the argument n up to the 
next multiple of a: 


function baseMe(n,a) { 
while (n%a != 0) 1 
п++; 
}; 
return п; 


} 


Precedence, which you saw in the simple arithmetic examples earlier, 
also applies with functions. This is important when you want to pass 
the result of one function as an argument to another. 
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Functions are evaluated from the dblMe (evenMe(3)) ; 

inside out. This probably seems 8 

: яй Р y : evenMe (dblMe(3) ) ; 

intuitive; but to confuse the situa- 6 

tion, it's possible to pass functions 

as arguments to other functions. 

Here's a simple function that function applyMe(f,n) ( return f(n); ) 
. undefined 

expects a function asa parameter: applyMe (dblMe, 3) ; 


е 6 
function applyMe(f,n) applyMe (evenMe, 3) ; 


{return f(n);} 4 
To pass the function as an argu- 
ment, you specify the function 
name without adding parentheses. 


Passing functions as arguments is a applyMe(function (n) { return n * 3; }, 3); 
common pattern in calling HTML5 | a 

APIs. It’s also common to declare 

simple, single-use functions 

directly. This is called an ¿nline 

function: it’s declared and then 

thrown away. You can use it only 

within the function it’s being 

passed to, not elsewhere in your 

program, because there’s no label 


to refer to it. 


That’s all you need to know about functions біте to move on to 
objects. 


Objects 
Functions let you group your code into convenient units that can then 
be called in your program, but you'll also want to group data and func- 
tions together. In JavaScript you do this with objects. In loose terms, 
an object is a collection of stuff. The stuff can be variables, functions, 
and other objects. JavaScript has several built-in objects, HTML 


www.it-ebooks.info 


Functions and objects 511 


provides another set of objects, and the browser still more. You can 
also create your own objects; let’s start with that. 


The simplest way to create an var myObject = {}; 

: i ; j 2 undefined 
object is with an object literal. An cansatà dod OE ek) 
empty object is a pair of braces. [object Object] 


j i : defined 
The object can contain variables {Р undefine 


and functions, but when they're 
part of an object they're referred 
to as properties and methods. 


In JavaScript, you can access a myObject.myProperty = 2; 
s 2 
property or method on an object myObject.myMethod = function(n) { return n * 3; } 
б A (function (n) {return n * 3;}) 
by using a period (.) followed by a nyObject .myMethod(myObject .myProperty) ; 
6 


label. You can create properties 
and methods by assigning a value, 
as shown here. 


This is the same code in an easier-to-read format: 


var myObject = {}; 

myObject.myProperty = 2; 

myObject.myMethod = function(n) { 
return n * 3; 


} 


You can then call the method, passing in the property like this: 
myObject.myMethod(myObject.myProperty) ; 


Now that you have an object to play with, it’s time to learn about the 
final type of loop: for...in. The following screenshot of the console 
shows a for...in loop in action on the myObject object just created. 


|| for (var prop in myObject) ( console.log(prop + ':' + myObject[prop]) } 
myProperty:2 
myMethod: function (n) { 
return n * 3; 


{> undefined 
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For...in loops through the properties and methods of an object. The 
variable prop is set to the label associated with the property or method. 
You'll see it used most often in scripts that check to see if a browser 
supports certain HTMLS5 features. Note that the syntax myObject 
['myProperty'] is an alternative way of accessing the myProperty method. 
This alternative approach is handy for use inside for. . .іп loops. 


Before we finish with objects, it's important to know that variables that 
refer to objects behave slightly differently than variables that refer to 
normal values like numbers. To see the difference, let's do a little 
experiment in the console. 


1 Create a variable a, and give it the Var a - 2; 
value 2 undefined 
i var b = a; 
2 Create a variable b, and give it the bani 
value of a. E 
. console. log(a); 
3 Set the variable b to have a value of 2 s 
4 instead. {> undefined 


Notice that after you do this, the value 
of a is unchanged. Setting b to have a 
value of a doesn’t create any sort of 
relationship between them. The value 
contained in a is copied into b. 


Now try a similar sequence of opera- var myObject = {}; 
: i . undefined 
tions with two variables that refer to myObject.myProperty = 2; 
objects. Notice that after assigning 2 
: : var myOtherObject = myObject; 
myObject as the value of myOtherObject, aui 
changing the value of myOtherObject myOtherObject.myProperty = 4; 
4 
.myProperty also changes the value of console. log(myObject .myProperty) ; 


4 


myObject.myProperty. This is because | 
{> undefined 


assigning the object to another vari- 
able creates two variables that refer to 
the «ame object. 
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There are several other features of objects, as well as a few different 
ways to create them, but you won't need to know them for this book. 
Just bear in mind that whenever you see periods, you re almost always 
looking at objects with properties and methods. 


YOU NOW KNOW ENOUGH TO START PUTTING JAVASCRIPT TO THE USE 
IT WAS INTENDED FOR-MANIPULAT ING WEB PAGES. BUT TO DO THAT, S 
YOU NEED TO UNDERSTAND HOW TO LINK JAVASCRIPT TO A WEB PAGE. 


How JavaScript fits into HTML 


The point of learning JavaScript is using it in browsers to do things 
with web pages. In this section, you'll learn how to get your JavaScript 
into HTML. You can do this three primary ways: inline in a <script> 
element, linked in a separate file, and inline in an event handler. Let’s 
look at each in turn. 


Inline <script> element 


The most straightforward way to add JavaScript to your web page is 
to include it inside a <script> element. Here’s a simple example: 


<!DOCTYPE html> 
<html> 
<head> 
<title>Inline script</title> 
</head> 
<body> 
<script> 
window.alert("Inline script!"); 
</script> 
</body> 
</html> 


If you create a web page using this code and load it in your browser, 
you should see something like the following screenshot (if you're using 
IE, you may need to click the warning bar to allow JavaScript in a 


local file). 
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Inline script - Mozilla Firefox 


м One script ae 


| 


Inline script! 


== 


After the previous section, you should have noticed that window is an 
object and alert is a method. This is built-in functionality provided by 
the browser. 


JavaScript linked in a file 
In the same way that CSS can be kept in a separate file so it can be used 
in more than one web page, so can JavaScript. When you load the 
page in your browser, it looks much the same as the previous example. 


Linked script - Mozilla ^B = 


Firefoxv |C Linked script 


Lj file:///home/robert/documents/wr — v = [B ссос a p~ 


Linked script! 


OK 


For this you need two files. The first is an HTML page: 


<!DOCTYPE һїт1> 
«html» 
«head» 
«title»Linked script</title> 
</head> 
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<body> 

<script src="myscript.js"></script> 
</body> 
</html> 


Then you need a file called myscript.js containing this line of code: 


window.alert('Linked script!'); 


Inline event handlers 
The final way to include JavaScript in a page is through an inline event 
handler. Events are things that can happen in a page, such as a user 
clicking a button. You'll learn more about them in the section “Events”; 
for now, you just need to know that you can create a handler for a click 
event by adding an onclick attribute to an element. This is what the 


page looks like. 
Firefox |7) inline event handier lej Firefox» | {") Inline event handler | +) 
Je [0 filegjhomeiroberudocumentsw ~ ©) (89 a p~ 4* [0 Mle:ihomesroberydocumentsiwt ~ ©) [фу a 8- 


Click me | 


When you click the button, the alert pops up. Here’s the code: 


<!DOCTYPE html> 
<html> 
<head> 
<title>Inline event handler</title> 
</head> 
<body> 
«button onclick="window.alert('Inline event!');"> 
Click me 
</button> 
</body> 
</html> 


You should notice two things about this code. First, no <script> ele- 
ments were required: the JavaScript is directly in the markup. Second, 
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the quotes around the argument to alert are single quotes, unlike the 
double quotes used in the previous example. In JavaScript, you can 
use either single or double quotes — it doesn’t make any difference as 
long as you start and end a given string with the same type of quote. 
But double quotes are used in the HTML for the attribute value, so 
using double quotes in the JavaScript would make the HTML invalid. 


ALL THREE APPROACHES FOR INCLUDING JAVASCRIPT IN A WEB PAGE THAT YOU'VE SEEN 
IN THIS SECTION USE THE DOCUMENT OBJECT MODEL (DOM) TO CAUSE THINGS TO 
— HAPPEN WITHIN THE PAGE. THE NEXT SECTION LOOKS AT THE DOM MORE CLOSELY. 


The DOM 


The Document Object Model (usually referred to as the DOM) is the 
way you access a web page through JavaScript. As the name implies, 
it’s based on an object called window. You already used the alert method 
of the window object in the previous section. The window object contains 
properties and methods provided by the browser, the most important 
of which is the document object. The document object contains properties 
and methods provided by the web page. To experiment with the docu- 
ment object, create a simple web page: 


<!DOCTYPE html> 


<html> Firefox m = 

<head> Benmemeraberusocumentser LB a g~ 
«meta charset="utf-8"> First div 
<title>DOM Example</title> Paragraph in first div 

</head> Second div 

<body> 


<div id="first"> 
<h1>First div</h1> 
<p>Paragraph in 
first div</p> 
</div> 
<div id="second"> 
<h1>Second div</h1> 
</div> 
</body> 
</html> 
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Open the console, and type in this 
code: 


document.getElementById('first'); 


As you can see, the getElementById 
method returns an object. This 
object also has methods and prop- 
erties that you can call: 


var d = 


document.getElementById('first'); 
console. Log(d.innerHTML) ; 


The elements inside the <div> can 
also be accessed through methods 
and properties of the element. 


This code grabs the first child of 
the <div>: 


var h = d.children[0] 


The DOM isn’t just a 
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document .getElementById('first'); 
[object HTMLDivElement] 


= 
và 


[4 var d = document .getElementById('first'); 
2 f> undefined 
* console. log(d.innerHTML) ; 


<hl>First div</hl> 
<p>Paragraph in first div</p> 


| [|> undefined 


var d = document .getElementById('first'); 
undefined 

var h = d.children[0]; 

undefined 

console. Log(h); 

[object XrayWrapper [object 
HTMLHeadingElement]] 

{> undefined 


A Y А Y Al 


DOM Example “Mozilla Firefox ах 
Firefoxy |Г]ООМЕ l 
way to access the docu- RS kt 
[E files/fhome/roberudocumentsiw — ~ ©) (897 а By 


ment. You can also use 


(anet v |scss М [s У [ELogging У) Position. | 


it to modify the page. 
Here's a quick example. 


+ var d = document .getElesentById('second'); 

» undefined 

+ var p = document .createElement('p') ; 

* undefined 

+ var t = document.createTextNode('Paragraph in the second 
iv!) 

» undefined 

p.appendChild(t); 

lobject Text] 


* d.appendChild(p); 
» [object HTMLParagraphElement] 


»| 
Caumm———— |?) 


First div 


Paragraph in first div 


Second div 


Paragraph in the second div 
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Here’s the code in more detail: 


CREATE A 
PARAGRAPH 
ELEMENT. 
var d = document.getElementById('second'); ` 
var p = document.createElement('p'); -4--7 
var t = document. createTextNode( 
ae Assen чан > 'Paragraph in the second div'); 
p.appendChild(t) ; —------- ADD THE TEXT МОРЕ 
d.appendChild(p) ; = TO THE PARAGRAPH. 
УУ. ADD THE 
PARAGRAPH TO 
THE <div>. 


THE DOM IS A HUGE SUBJECT, BUT THIS INTRODUCTION HAS GIVEN YOU AN IDEA 
ABOUT WHAT IT DOES AS A FOUNDATION FOR LEARNING MORE. CHECK THE FINAL 
SECTION OF THIS APPENDIX FOR ADDITIONAL RESOURCES. IT'S TIME TO COMPLETE 
YOUR UNDERSTANDING OF JAVASCRIPT WITH A QUICK TOUR OF EVENTS. 


Events 


You saw an event handler in “How JavaScript fits into HTML” —in that 
case, an inline event handler. A sandler is a function that’s called when 
an event happens (when the event fires). In this section, you'll see how 
to deal with events in an external JavaScript file. When you're attaching 
handlers from an external JavaScript file, you need to use the DOM. 


Use the simple page you created for exploring the DOM in the previ- 
ous section, but add a reference to an external JavaScript file: 


«IDOCTYPE html» 
«html» 
«head» 
«meta charset="utf-8"> 
«title»DOM Example</title> 
«script src="events.js"></script> 
«/head» 
«body» 
«div id="first"> 
«hi»First аім</һ1> 
<p>Paragraph in first div</p> 
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</div> 
<div id="second"> 
<hi>Second div«/h1» 
</div> 
</body> 
</html> 


Of course, you also need to create the JavaScript file. Start with this 
code in it: 


var d = document.getElementById('first'); 
console. Log(d.innerHTML) ; 


If you load the page now, you'll see this in the console. 


[* d is null events.js:2 


This happens because at the point where the JavaScript executes, no 
element has the ID first. The JavaScript is executed as soon as it’s ref- 
erenced, in the <head> element. You need the JavaScript to await exe- 
cution until after the document is loaded. Fortunately, there’s an event 
for just such a scenario. 

NOTE THAT EVENT-HANDLING CODE WORKS VERY DIFFERENTLY IN OLDER 


VERSIONS OF IE. WE DON'T HAVE ROOM TO GO INTO THE DETAILS НЕКЕ; 
CHECK THE “FURTHER READING” SECTION FOR MORE ON THE DIFFERENCES. S 


ә 
i | 
Wrap the code you want to run ina 
* <һ1>Р1г$% div</hl> 
function: <p>Paragraph in 
first div</p> 
function goO { > 
var d = document —_———EE =аыышс-— 
.getElementById('first'); 
console. Log(d.innerHTML) ; First div 
} 
Paragraph in first div 
Then use the addEventListener 
method to attach your function as a Second div 


handler for the window's 1oad event: 


window.addEventListener('load', go); 


www.it-ebooks.info 


520 


APPENDIX D JavaScript 


You can see in the console that the 
code now runs as expected. Notice 
that a function is being passed as an 
argument, as discussed earlier. 


Now let’s extend this example to add a button element and then add a 
click handler to the element. The following screenshots show the page 
before and after clicking the button. 


E "Events Example - Mozilla Firefox ў ‘Events Example - Mozilla Firefox 
Firefox v Events Example |+ Firefox~ Events Example |+ 


file-///home/roberudocuments/wi v E а Biv file-///home/robertdocuments/w! v Em а p- 
First div First div 
Paragraph in first div Paragraph in first div 
Second div Second div 


Click me Click me 


Paragraph in the second div 


This is the code to put in the events.js file: CALLED ON 
Pme i BUTTON CLICK 
function add_element() { SAME CODE YOU USED 
var d = document.getElementById('second'); ~<«——— TO MODIFY THE 


var p document.createElement('p'); DOCUMENT EARLIER 


var t = document.createTextNode('Paragraph in the second div'); 
p.appendChild(t); 
d.appendChild(p); 


} 

function 900) { 
var b = document.createElement('button'); 
var t = document.createTextNode('Click me'); 


j CREATES BLITTON 
b.appendChild(t); AND ADDS 
b.addEventListener('click', add element); a EVENT LISTENER 
var d = document.getElementById('second'); 

f d.appendChild(b); LISTENS 
TO LOAD 
window.addEventListener('load', go); <— EVENT 


The final thing you need to be aware of is event bubbling. When an 


event occurs, such as a click event, it bubbles up the document tree. This 


www.it-ebooks.info 


Events 521 


means the click event is fired from the element where the event 
occurred all the way up to the document root. This example attaches to 
the document a click handler that determines what type of element was 


clicked. 

Г TEvents Example ^ Mozilla Firefox" "= 1° [x ( Vevents Example - Mozilla Firefox | |f 
Firefoxy |: Events Example 1+] Firefoxv |: Events Example [+] Firefoxv |; | Events Example Lej 
& [D пелто ~ E) (Mv соса) + & [C fenn vE) (9 соса) By & [C пелљо ~E) (95 са) By 
First div 

Paragraph 

Paragraph in first div 

Second div 


Returning to the example, edit events.js one more time: 


function click_handler(event) { —M 
TARGET Pd var el = event.target; ^v AS PARAMETER 
PROPERTY switch (el.nodeName) 1 
case "DIV": NODENAME 
window.alert('Div'); PROPERTY 
break; 
case "H1": 
window.alert('Heading'); 
break; 
case "P": 
window.alert('Paragraph'); 
break; 
} 
} HANDLES 
function 900) { CLICK 
document.addEventListener('click', click_handler); EVENTS 
} 


window.addEventListener('load', go); 


Any function added as an event handler receives the event object as a 
parameter @. The target property of the event object @ is the element 
where the event originated. The element object has a nodeName property 
© that tells you the type of element clicked. You attach click_handler to 
the document to handle all click events @. 
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The main benefit of this approach is that it reduces the number of event 
listeners required. This can reduce memory and processing require- 
ments for large and complex pages. You'll see it used frequently in 
large-scale web applications. 


YOUR RAPID INTRODUCTION TO JAVASCRIPT IS NOW COMPLETE. DON'T WORRY IF 
YOU'RE STILL CONFUSED-IT'S UNLIKELY THAT YOU'LL PICK IT ALL UP IN A FEW PAGES. 
AT LEAST NOTHING YOU SEE IN THE REST OF THE BOOK SHOULD BE LINFAMILIAR TO 
YOU. FEEL FREE TO REFER BACK HERE ANY TIME. IF YOU WANT TO GO INTO JAVASCRIPT 
IN MORE DEPTH, CHECK OLIT THE RESOURCES IN THE NEXT SECTION. 


Further reading 


For a detailed discussion of the differences between event handling in 
IE and all the other browsers, refer to quirksmode.org: www 
.quirksmode.org/js/introevents.html. 


For a complete reference of all the methods and properties of the 
DOM, check out the Mozilla Developer Network: https://developer 
mozilla.org/en/DOM. 


For an alternative introduction to JavaScript, try "Thau's JavaScript 
Tutorial": www.webmonkey.com/2010/02/avascript_tutorial/. 


THAT CONCLUDES THE APPENDIXES FOR HELLO/ HTML AND C553. AFTER READING THEM 
YOU SHOULD HAVE AN UNDERSTANDING OF HOW THE WEB WAS BUILT AND HOW WE 
ARRIVED AT THE CURRENT STANDARDS AS WELL AS A WORKING KNOWLEDGE OF THE 
TECHNOLOGIES WHICH MAKE LIP MODERN WEB PAGES: HTML. CSS, AND JAVASCRIPT. 
WELCOME TO THE WORLD OF WEB DEVELOPMENT. I HOPE YOU ENJOY IT! 
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Symbols 
-- 502 
1 497 
l= 498 
limportant 341 
.htaccess file 151 
@font-face 594—397 
browser support for 595 
properties 395 
@keyframes 343 
Dj 495 
/ 495 
“поё pseudo-class 255-257 
Vnth-child pseudo- 
class 244—247 
Xtarget pseudo-class 265-267 
&& 497 


Numerics 

2D transform 327 
browser support for 323 
origin 325 
rotation 325 
scaling 324 


skewing 326 
translation 326 

3D transform 528—530 
browser support for 328 


A 
<a> element 452 
accessibility 24 
Accessibility for Rich Inter- 
net Applications. See 
ARIA 
add_storageitem 
function 224 
addColorStop method 89 
addEventListener 
method 519 
AddType directive 151 
adjacent-sibling 
combinator 256—258 
adr 20 
AJAX 434 
AND operator 497 
Andreessen, Marc 427 
animation 543—546 
browser support for 343 
animation-* properties 
348 
keyframes 347 
using modernizr.js in 
older browsers 349 
following a path 111 
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in <canvas> 96 
animation-duration pro- 
perty 344 
animation-iteration-count 
property 344 
animation-name property 
344 
anonymous table object 277 
API 
browser-based 155—189 
browser support 
for 189 
introduction to 154 
network and 
location 191—229 
appendChild method 168 
Apple, audio codec support 
130 
application programming 
interface (API) 153 
arc method 78 
Arena 427 
argument 508 
ARIA 24-26 
progressbar role 55 
article 
inan outline 14 
vs. section 8 
<article> element 7 
vs. <section> element 8 
<aside> element 16 
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aspect-ratio media 
query 291 
attribute 
custom 26-27 
global 25 
attribute selector 252 
and microdata 252 
«audio» element 121, 
151—152 
attributes 124—128 
background 128 
browser support for 123 
codecs 129-133 
in ІЕ8 126 
loop attribute 125 
multiple sources 133-134 
opening and closing 
tags 125 
preload attribute 124 
src attribute 124 
styling with CSS. 126-198 
audio 
importance of 120 
integrating with other 
content 146—150 
web server 
configuration 151 
audio file, encoding 150-132 
autocomplete 61 
autofocus 61 


B 
<b> element 22—25 
HTMLÁ vs. НТМІ5 23 
back button 173-179 
background image 
in CSS3 371 
multiple backgrounds 
565—568 
origin and clipping 369 
scaling 371-378 
size 561—565 
background property 367 
background-attachment 
property 483 


background-color 
property 483 
background-image 
property 483 
background-position 
property 483 
background-repeat 
property 483 
background-size 
property 361 
cross-browser 387 
beginPath method 79 
behavior property 391 
Berners-Lee, Tim 
creation of web 426 
HTML 1.0 428 
W3C 428 
Bézier curve, drawing in 
<canvas> 81 
bezierCurveTo method 81 
bitrate 131 
blur-radius 352 
<body> element 443 
border-color property 482 
border-image property 
browser support for 373 
drop shadows 378 
repeat keyword 375 
round keyword 375 
stretch keyword 375 
border-image, fill 
keyword 387 
border-radius property, 
browser support for 358 
border-style property 482 
border-width 
property 482, 484 
box model 284 
box-flex 294 
box-lines 297 
box-ordinal-group 295 
box-orient 296 
box-shadow property, 
browser support 


for 353 
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box-sizing property 284 
browser support for 284 
in Firefox and Safari 5 

310 

<br> element 447 
not for layout 447 

branching 503 

browser cache vs. applica- 

tion cache 214 
browser support for 
HTML5 32-36 
Internet Explorer 35—56 
browser support for 
HTML45 features 68 
detecting 69-71 
inconsistencies 69 


browser wars 428—430 


С 
calc function 279—285 
browser support for 282 
good and bad 283 
in Firefox 310 
<canvas> element 22, 
74—96 
animation 94 
browser support for 74, 
114-118, 123, 130 
drop shadows 91—92 
fallback content 74 
font property 85 
games and 94—96 
gradients 88—91 
IE support for 114 
transformations 92—94 
canvas 
drawing context 76 
drawing shapes 76-82 
drawing text 84 
placing images 82 
CERN 426 
check boxes 40 
checked 263 
checkValidityQ method 64 


Chrome 
<audio> element in 127 
HTML validation 465 
JavaScript interactive 
console 492 
support for cross- 
document messaging 
201, 206 
support for, download- 
able fonts 399 
text formatting 161 
video codec support 138 
WebM support 140 
<circle> element 99 
circle 
drawing in 78 
drawing in SVG 99 
class attribute 443, 472 
class selector, and attribute 
selector 255 
class, role of 242 
clear property 488 
clearRect method 76 
closePath method 80 
codec 129-132 
lossless and lossy 129 
video 138-142 
browser support 
for 138 
color media query 292 
color property 481 
color stop 89 
color value, for 
shadows 352 
column-count property 417 
column-gap property 419 
column-span property 418 
column-width 
property 417 
combinator, browser sup- 
port for 239 
communication 200 
content 
elements 18-23 
sectioning 7—8 


content model 29—32 
content types 32 
contentEditable 
attribute 154—164 
contenteditable attribute 
edited content, saving 159 
in ІЕ8 157 
overriding 156 
control character, defini- 
tion of 446 
cookies 223 
coords object 195 
createLinearGradient 
method 88 
CreateLink command 163 
createRadialGradient 
method 90 
cross-document 
messaging 201—205 
browser support for 201 
CSS 
<audio> element, 
styling 126 
box model 484—488 
cascading 475—478 
child combinator 474 
display modes 486 
floated elements 488 
inheritance 470—471 
inline styles 469 
layout 488-490 
browser support for 
features 308 
future of 295—508 
making mobile website 
with 292 
properties 480—483 
borders and 
backgrounds 482 
colors and 
lengths 480—482 
rendering modes 485—486 
rules 467—469 
selectors 471—480 
class selectors 472—475 
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combinators 473-475 
ID selectors 471-472 
pseudo-classes 478 
specificity 477 
style sheet, adding to 
HTML 469-470 
transitions 330 
type selectors 469 
whitespace 470 
CSS2, layout features, 
underused 272—278 
CSS3 
attribute selector 252—257 
and class selector 255 
and ID selector 255 
appending 253 
browser support 
for 252 
existence selector 253 
background images 361 
box model 284 
combinators 235 
drop shadows 352 
evolution from 
CSS2 439 
improvements to CSS2 
approaches 279—285 
introduction to 234 
layout 279-311 
modularity 439 
new features 233-270 
pseudo-classes 240 
selecting elements 
based on attributes 
251-261 
based on document 
structure 254—251 
based on user interac- 
tion 261—267 
selectors, browser sup- 
port for 267 
transparency 318 
web typography 392-416 
CSS3 PIE 390 
CurvyCorners 358 
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D 
data, storing for offline 
use 222—228 
data-* attributes 
collection 27 
<datalist> element 65—67 
datalist 65 
dataLoaded function 145 
date input 44 
datetime-local input 45 
declarative vs. 
imperative 97 
<defs> element 103, 107 
descendant combinator 
473 
device-aspect-ratio media 
query 292 
device-pixel-ratio media 
query 292 
digital rights management 
(DRM) 150 
Dijit 26 
disabled 262 
display property 487 
display: box 294 
display: table 275 
browser support for 276 
good and bad 278 
display: table-cell 278 
display: table-row 278 
distance from user to a 
point, calculating 196 
<div> element 7, 452 
doclick() 174 
DOCTYPE 17-18 
document object 516 
Document Object Model 
(DOM) 431-518 
DOM Level 2-3 
standards 433 
document outline 11 
dot-com bubble 434 
dot-coms 429 
drag-and-drop 164-173 
basic 167—168 


browser support for 168 
sequence of events 
165-166 
draggable attribute 167 
dragOver event 168 
drawImage method 83 
transformations and 93 
drawing context 75 
drop event 168 
drop shadow 
box shadows 552—555 
cross-browser 385 
inset value 354 
text shadows 356 
DropShadow, IE 388 
Dynamic HTML 
(DHTML) 432 
dynamic pseudo-class 


261-267 


E 
Ecma International 431 
ECMAScript 431 
Edwards, Dean 71 
element 59 
choosing by attributes 
251 
choosing through 
relationships 234—251 
margin 484 
new 
content 18—25 
page structure 7—18 
reasons for 4—7 
selecting among with 
pseudo-classes 240-251 
sets, selecting with 
combinators 255—240 
sizing 484 
styling based on state 262 
«em» element 22, 450 
email address, validity 
of 51—52 
embedded content 52 
Embedded OpenType 
(EOT) 598 


www.it-ebooks.info 


emphasis 450 

enabled 262 

EQUAL operator 498 

event handler 64 

Exclusions module 306 

execCommand function, 
browser support for 161 

existence selector 253 

explorercanvas library 115 


Е 
FFmpeg 140 
<fieldset> element 54 
<figcaption> element 21—22 
<figure> element 21—22 
figure 21-22 
fillRect method 76 
fillStyle method 76 
fillText method 85 
Firefox 
«audio» element in 126 
drag-and-drop in 168 
HTML validation 465 
JavaScript interactive 
console 493 
microdata, support for 
180 
Navigator origins 432 
support for 
box-sizing property 310 
downloadable fonts 399 
support for HTML5 
features 68, 114, 151 
text formatting 161 
Theora support 139 
video controls 123 
x-moz-errormessage 
attribute 69 
first-child 242 
first-letter 260 
first-line 258, 260 
first-of-type 250 
Flash 
legacy browsers, 
supporting 152 
vs. HTML5 video 150 


flexbox 294—298 
browser support for 295, 
310 
good and bad 298 
multiline property 297 
flexible box 294 
float 488 
float property 307, 488 
flow content 32 
font service 400—407 
categories 400 
Fontdeck 405 
font-family property 470 
font-feature-settings pro- 
perty 410 
mapping to CSS3 pro- 
perties 415 
font-size-adjust property 
407—409 
browser support for 407 
FontSquirrel 400—403 
«footer» element 17 
<foreignObject> 
element 103—105 
form 
autocomplete 61 
controls 
color pickers 58 
input 39 
telephone numbers 57 
submission 42 
formatblock command 
162-163 
formnovalidate attribute 50 
fragment identifier 265 


G 

<g> element 104—105 

general-sibling 

combinator 258—240 

Geolocation API 192—200 
browser support for 192 
practical uses for 196 

getContext method 75 

getCurrentPosition 


method 195 


getElementByld method 
517 
getItems() method 180, 184 
global attribute 23-29 
Global Positioning System 
(GPS) 192 
glyph 410 
Gmail, introduction of 434 
Google 
audio codec support 130 
GPS support 192 
map display 199 
video codec support 138 
Google Mail, navigating 
between views 176 
Google Maps API 199 
Google Web Fonts 403-405 
gradient 
in Canvas element 
applying as fillStyle 89 
color stops 89 
defining relative to the 
entire <canvas> 
context 91 
extents 88 
in CSS 578—584 
background-size pro- 
perty 382 
browser support for 579 
contain keyword 382 
cross-browser 386 
radial 381 
in SVG 107 
linear 88 
radial 90 
types 88 
GREATER THAN 
operator 499 
Grid Alignment module 298 


H 

<hl> element 445 
hashchange event 175 
hasLayout 309 
hCalendar 19-20 
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hCard 20, 180 
«head» element 443 
<header> element 9 
heading 9-14 
heading content 32 
<hgroup> element 10 
content categories 30 
history 
storing complex objects 
in 177 
updating 174-175 
history.pushState method 
177 
hover 261, 331 
href attribute 251, 452 
HSL 320-323 
hslQ function, browser sup- 
port for 320 
HSLA 320 
hslaQ function, browser 
support for 320 
HTML 
basics 442-466 
documents 443 
elements 442 
attributes 443 
block 450 
emphasis 450—451 
for text 445—452 
headings 445—446 
images 454—457 
inline 450 
inline frames 457 
links 452—455 
lists 448—450 
neutral 451 
nonvisible 458 
paragraphs 445—448 
self-closing 447 
markup 444 
parsing 444—464 
resources 464 
browser tools 465 
web tools 464 
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HTML (continued) 
tags 442 
attributes 443 
parents and children 
443 
start and end 442 
validation, reasons for 
462 
validity 459—462 
vs. XML 435 
well-formed 461 
whitespace 446 
«html» element 445 
HTML 1.0 428 
HTML 2.0 429 
HTML 3.2 430 
HTML Lint 464 
HTMLS 430 
HTML4 430 
audio and video 120 
content, sectioning 7 
forms, limitations of 
39-42 
input types 39 
semantics, extending 4 
text validation 47 
HTML5 
accessibility 25 
as future of the web 439 
browser support for 32 
content, sectioning 7 
elements, new 6 
embedding audio and 
video 122 
form controls, browser 
support for 68 
forms, controls 59—72 
layout tables 272 
principles followed by 
WHATWG 437 
standards mode 18 
video vs. Flash 150 
html5-now 71 
hue 321 
hypertext, components 


of 442-445 


| 
id attribute 4—6, 265, 443, 
471 
usage analysis 5 
ID selector and attribute 
selector 255 
<iframe> element 104 
iframe 201 
image 21—22 
embedding in SVG 101 
embedding SVG as 115 
importing 83 
placing on a canvas 82 
«img» element 21, 454 
width attribute 454 
imperative vs. declarative 
97 
inline-block 272-275 
browser support for 273 
good and bad 275 
in IE6 and IE7 509 
issues with measure- 
ments 279 
letter spacing 281 
«input» element 
new features in HTML5 
59—62 
setCustom Validity pro- 
perty 62 
input type 
email 51—55 
number 43 
time 45 
input types 43—45 
inserthtml command 162 
inset value, in box shadow 
354 
interactive content 32 
Internet Engineering Task 
Force (IETF) 428 
Internet Explorer 
behaviors 390 
drag-and-drop in 169 
filter attribute 314 
JavaScript interactive 


console 494 
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launch of 428 
MP4 support 140 
shadow filters 388 
support for 114 
downloadable 
fonts 399 
inline-block 309 
text formatting 161 
video codec support 138 
invalid 264 
itemValue property 181 


J 
JavaScript 

adding to HTML 
513-516 
inline event 

handlers 515 

linked in a file 514 

arithmetic 495—497 
precedence 495 
terminology 495 

branching 503—505 

comparisons 497—500 

controlling audio and 
video 144-146 

customizing validation 
messages with 62 

do...while loop 506 

DOM 516 

events 518—522 
event bubbling 520 

extending forms 
with 62—68 

forloop 505 

for..in loop 511 

functions 507—510 
precedence 509 

if statement 505 

interactive console, set- 
ting up 491—494 

introduction of 451 

looping 505—507 

objects 510—512 
object literal 511 


Java Script (continued) 
onclick attribute 515 
quotes 515 
responding to value 

changes 64—65 
strings 

adding 496 

comparing 499 
switch statement 504 
triggering validation 

with 64 
variables 500 

special operands 502 
while loop 505 
working with form 

values 67 

JavaScript include 201 

jQuery 
supporting older 

browsers 269—270 
using for animation in 


older browsers 349 


K 
keyframe, defining 344 
<keygen>element 59 


| 
last-child 245 
last-of-type 250 
LatLon library 197 
layout, media queries 
285-293 
LESS THAN operator 499 
<li> element 449 
libwww 427 
ligature 
discretionary 411 
in CSS3 410 
lightbox 314 
line, drawing in <canvas> 76 
lineTo method 77 
lining numeral 412 
<link> element 458 
link, creating 163 


linter 464 
loadeddata event 134, 145 
local storage 223-227 
location 
accuracy 195 
finding 193 
accuracy 194 
continuously 195 
means of identifying 194 
location.hash 174 
log command 167 
looping 503 


M 
manifest file 212 
CACHE section 219 
FALLBACK section 217 
NETWORK section 217 
pattern-matching and 
wildcards 219 
updating 214 
map of user's location 199 
margin-width property 484 
marking up, definition 
of 444 
mask attribute 109 
MathML 435 
matrix 106 
max attribute 48 
max-device-width media 
query 287 
max-width media 
query 287 
media query 
and grid/template-based 
layouts 301 
browser support for 286, 
311 
device detection 292 
media.io 151 
<meta> element 458 
metadata 443 
metadata content 32 
<meter> element 56, 145 
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microdata 28—29, 179-185 
browser support for 180 
global attributes 28 

microformats 19 

Midas 427 

min attribute 48 

min-width media query 289 

Miro Video Converter 

139-140 

modernizr.js 349 

Mosaic 427 

moveTo method 77 

Mozilla, audio codec 

support 130 

MP3 129 
browser support for 151 

MP4 138 
profiles 139 
video, browser support 

for 140, 151 
multiple domains, faking 
201 
Multipurpose Internet Mail 
Extensions 
(MIME) 151 
myProperty method 512 
myscript.js 515 


N 

<nav> element 17 

navigation, global and 
local 17 

navigator.on Line 
property 215 

Netscape Navigator 428 

Node.js 206 

NodeList 180 

NOT EQUAL operator 
498 

NOT operator 497 

novalidate attribute 50 

nth-child 245 

nth-first-of-type 250 

nth-last-child 246 

nth-last-of-type 250 
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number input 43 
max and min attributes 


48 


О 
<object> element 116, 455 
fallback content 456 
plug-ins 456 
Offline API 215—217 
offline web 
application 208—222 
application cache 211-215 
browser support for 209 
development 
environment 209-211 
fallback display 217 
network 
connectivity 215 
offset-x 352 
offset-y 352 
Ogg Vorbis (OGG) 
130-151 
audio, browser support 
for 151 
video, browser support 
for 151 
<ol> element 448—449 
ondragstart attribute 167 
onhashchange function 176 
oninput event handler 65 
only-child 248 
onmessage event 207 
onoffline event 215 
ononline event 215 
onpageshow event 179 
onpopstate event 179 
opacity 514—317 
browser support for in 
IE8 and earlier 346 
in lightboxes 314 
opacity property, browser 
support for 314 
Opera 
<audio> element in 127 
audio codec support 130 


HTML validation 465 
JavaScript interactive 
console 494 
microdata, support 
for 180 
support for downloadable 
fonts 399 
text formatting 161 
Theora support 139 
WebM support 140 
optional 264 
OR operator 497 
orientation media query 291 
orientation, changing lay- 
out based on 291—292 
outline, sections in 13 
«output» element 55—54 


P 
padding-width property 484 
page 

state, updating 175 

styling based on URL 

target 265—267 

page structure 

elements 7—18 
parameter 508 
parsing 458 

definition of 444 
«path» element 100-101 
pattern 

applying to text 108 

in SVG 107-109 
pattern attribute 48 
perspective 328 
phrasing content 32 
placeholder attribute 60 
placeholder text 59-61 
plug-in 122 
polygon element 99 
polygon, drawing in 

SVG 99 

<polyline> element 100 
popState event 178 
popstate event 177 
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Portable Font Resource 
(PFR) 398 
post-decrement 
operator 502 
post-increment 
operator 502 
postMessage function 204 
<pre> element 22, 448 
<progress> element 55 
prop variable 512 
Proposed Recommenda- 
tion (PR) 431 
pseudo-class 240—251 
:first-child 242 
last-child 243 
:nth-child 244—247 
odd and even 245 
patterns 245 
:nth-last-child. 246 
child selectors 243 
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